一、SVG学习
1. <svg>标签
<svg width="300" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg"> <!--width 和 height 属性可设置此 SVG 文档的宽度和高度。--> <!--version 属性可定义所使用的 SVG 版本,xmlns 属性可定义 SVG 命名空间。--> <!--SVG 文件可通过以下标签嵌入 HTML 文档:<embed>、<object> 或者 <iframe>。--> </svg>
2. <rect>标签
<svg width="500" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <!--width 和 height 属性可设置此 SVG 文档的宽度和高度。--> <!--version 属性可定义所使用的 SVG 版本,xmlns 属性可定义 SVG 命名空间。--> <!--SVG 文件可通过以下标签嵌入 HTML 文档:<embed>、<object> 或者 <iframe>。-->
<rect width="300" height="100" x="50" y="30" rx="20" ry="20" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);fill-opacity:0.9;stroke-opacity:0.8;opacity:0.5"> <animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="0" to="50"/> <animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="0" to="30"/> <animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="0" to="300"/> <animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="0" to="100"/> <animateColor attributeName="fill" attributeType="CSS" from="lime" to="red" begin="2s" dur="4s" fill="freeze"/> </rect><!--x 属性定义矩形的左侧位置(例如,x="0" 定义矩形到浏览器窗口左侧的距离是 0px)--> <!--y 属性定义矩形的顶端位置(例如,y="0" 定义矩形到浏览器窗口顶端的距离是 0px)--> <!--rx 和 ry 属性可使矩形产生圆角--> <!--fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值)--> <!--stroke-width 属性定义矩形边框的宽度--> <!--troke 属性定义矩形边框的颜色--> <!--fill-opacity 属性定义填充颜色透明度(合法的范围是:0 - 1)--> <!--stroke-opacity 属性定义笔触颜色的透明度(合法的范围是:0 - 1)--> <!--opacity 属性定义整个元素的透明值(合法的范围是:0 - 1) TODO opacity会覆盖fill-opacity和stroke-opacity --> </ svg >
3. <circle>标签
<circle cx="500" cy="80" r="50" style="fill: rgb(0,0,255);opacity:0.5"></circle> <!--cx cy圆心坐标 r 半径-->
4. <ellipse>标签
<ellipse cx = "650" cy="80" rx="20" ry="50" style="fill: rgb(0,0,255);opacity:0.5"></ellipse> <!--rx ry 水平和垂直方向半径-->
5. <line>标签
<line x1="700" y1="30" x2="800" y2="130" style="opacity: 0.5;stroke-width:5;stroke: rgb(0,0,255);"></line> <!--x1 y1起始点 x2 y2终止点-->
![](https://i-blog.csdnimg.cn/blog_migrate/9d040f958f010984ebb0b64bd2de7d31.png)
6. <polygon>标签 用来创建含有不少于三个边的图形。
<polygon points="850 30 900 130 950 30"opacity="0.5" stroke-width="5" fill="rgb(0,0,255)" stroke="rgb(0,0,255)"></polygon> <!--points 经过的坐标点 canvas是循环绘制这种图形-->
![](https://i-blog.csdnimg.cn/blog_migrate/92c8861ee1bba719251554d76d22d0d0.png)
7. <polyline>标签 用来创建仅包含直线的形状。
<polyline points="1050 30 1000 130 1100 130" opacity="0.5" style="fill:#fff;stroke:rgb(0,0,255);stroke-width:5"/> <!--Polygon能画封闭的多边形,而Polyline不会首尾自动相连,形成封闭的图形-->
![](https://i-blog.csdnimg.cn/blog_migrate/cd313f9db94d66614dca9d7fa1dd15e5.png)
8. <path>标签 定义路径,绘制复杂图形。
<path d="M153 334 C153 334 151 334 151 334 C151 339 153 344 156 344 C164 344 171 339 171 334 C171 322 164 314 156 314 C142 314 131 322 131 334 C131 350 142 364 156 364 C175 364 191 350 191 334 C191 311 175 294 156 294 C131 294 111 311 111 334 C111 361 131 384 156 384 C186 384 211 361 211 334 C211 300 186 274 156 274" style="fill:white;stroke:red;stroke-width:2"> <!--M = moveto (M X,Y)--> <!--L = lineto (L X,Y)--> <!--H = horizontal lineto (H X) 画水平线到指定的X坐标位置--> <!--V = vertical lineto (V Y) 画垂直线到指定的Y坐标位置--> <!--C = curveto (C X1,Y1,X2,Y2,ENDX,ENDY) 三次贝赛曲线--> <!--S = smooth curveto (S X2,Y2,ENDX,ENDY) 平滑曲线--> <!--Q = quadratic Belzier curve (Q X,Y,ENDX,ENDY) 二次贝赛曲线--> <!--T = smooth quadratic Belzier curveto (T ENDX,ENDY) 平滑二次贝赛曲线--> <!--A = elliptical Arc (A RX,RY,XROTATION,FLAG1,FLAG2,X,Y) 弧线--> <!--Z = closepath--> </path>
![](https://i-blog.csdnimg.cn/blog_migrate/8b43777fab158bbd9fd69488f29e1ae3.png)
9. <linearGradient>标签 线性颜色渐变。
<circle cx="500" cy="80" r="50" style="fill: url(#orange_red);opacity:0.5"></circle> <!--cx cy圆心坐标 r 半径 arc--> <defs> <linearGradient id="orange_red" x1="0%" y1="50%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/> </linearGradient> </defs> <!--标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置--> <!--通过fill:url(#orange_red)来使用--> <!--offset 属性用来定义渐变的开始和结束位置。-->
10. <radialGradient>标签 放射性颜色渐变。
<ellipse cx = "650" cy="80" rx="20" ry="50" opacity="0.5" fill="url(#grey_blue)"></ellipse> <!--rx ry 水平和垂直方向半径-- 两条贝塞尔--> <defs> <radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/> <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/> </radialGradient> </defs> <!--cx、cy 和 r 属性定义外圈,而 fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成。--> <!--每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。-->
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>myTest</title> <script type="text/javascript" src="app.js"></script> <script type="text/javascript" src="ext-all-debug.js"></script> <script type="text/javascript" src="openSource/d3.js"></script> <link rel="stylesheet" href="style/sass/style.css" type="text/css"/> </head> <body> <svg width="1200" height="700" version="1.1" xmlns="http://www.w3.org/2000/svg"> <!--width 和 height 属性可设置此 SVG 文档的宽度和高度。--> <!--version 属性可定义所使用的 SVG 版本,xmlns 属性可定义 SVG 命名空间。--> <!--SVG 文件可通过以下标签嵌入 HTML 文档:<embed>、<object> 或者 <iframe>。--> <rect width="300" height="100" x="50" y="30" rx="20" ry="20" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);fill-opacity:0.9;stroke-opacity:0.8;opacity:0.5"> <animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="0" to="50"/> <animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="0" to="30"/> <animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="0" to="300"/> <animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="0" to="100"/> <animateColor attributeName="fill" attributeType="CSS" from="lime" to="red" begin="2s" dur="4s" fill="freeze"/> </rect> <!--rect()--> <!--x 属性定义矩形的左侧位置(例如,x="0" 定义矩形到浏览器窗口左侧的距离是 0px)--> <!--y 属性定义矩形的顶端位置(例如,y="0" 定义矩形到浏览器窗口顶端的距离是 0px)--> <!--rx 和 ry 属性可使矩形产生圆角--> <!--fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值)--> <!--stroke-width 属性定义矩形边框的宽度--> <!--troke 属性定义矩形边框的颜色--> <!--fill-opacity 属性定义填充颜色透明度(合法的范围是:0 - 1)--> <!--stroke-opacity 属性定义笔触颜色的透明度(合法的范围是:0 - 1)--> <!--opacity 属性定义整个元素的透明值(合法的范围是:0 - 1) TODO opacity会覆盖fill-opacity和stroke-opacity--> <line x1="700" y1="30" x2="800" y2="130" style="opacity: 0.5;stroke-width:5;stroke: rgb(0,0,255);"></line> <!--x1 y1起始点 x2 y2终止点-- canvas moveTo lineTo--> <polygon points="850 30 900 130 950 30" opacity="0.5" stroke-width="5" fill="rgb(0,0,255)" stroke="rgb(0,0,255)"></polygon> <!--points 经过的坐标点 canvas是循环绘制这种图形--> <polyline points="1050 30 1000 130 1100 130" opacity="0.5" style="fill:#fff;stroke:rgb(0,0,255);stroke-width:5"/> <!--Polygon能画封闭的多边形,而Polyline不会首尾自动相连,形成封闭的图形--> <path d="M153 334 C153 334 151 334 151 334 C151 339 153 344 156 344 C164 344 171 339 171 334 C171 322 164 314 156 314 C142 314 131 322 131 334 C131 350 142 364 156 364 C175 364 191 350 191 334 C191 311 175 294 156 294 C131 294 111 311 111 334 C111 361 131 384 156 384 C186 384 211 361 211 334 C211 300 186 274 156 274" style="fill:white;stroke:rgb(0,0,255);stroke-width:5"> <!--M = moveto (M X,Y)--> <!--L = lineto (L X,Y)--> <!--H = horizontal lineto (H X) 画水平线到指定的X坐标位置--> <!--V = vertical lineto (V Y) 画垂直线到指定的Y坐标位置--> <!--C = curveto (C X1,Y1,X2,Y2,ENDX,ENDY) 三次贝赛曲线--> <!--S = smooth curveto (S X2,Y2,ENDX,ENDY) 平滑曲线--> <!--Q = quadratic Belzier curve (Q X,Y,ENDX,ENDY) 二次贝赛曲线--> <!--T = smooth quadratic Belzier curveto (T ENDX,ENDY) 平滑二次贝赛曲线--> <!--A = elliptical Arc (A RX,RY,XROTATION,FLAG1,FLAG2,X,Y) 弧线--> <!--Z = closepath--> </path> <circle cx="500" cy="80" r="50" style="fill: url(#orange_red);opacity:0.5"></circle> <!--cx cy圆心坐标 r 半径 arc--> <defs> <linearGradient id="orange_red" x1="0%" y1="50%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/> </linearGradient> </defs> <!--标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置--> <!--通过fill:url(#orange_red)来使用--> <!--offset 属性用来定义渐变的开始和结束位置。--> <ellipse cx = "650" cy="80" rx="20" ry="50" opacity="0.5" fill="url(#grey_blue)"></ellipse> <!--rx ry 水平和垂直方向半径-- 两条贝塞尔--> <defs> <radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/> <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/> </radialGradient> </defs> <!--cx、cy 和 r 属性定义外圈,而 fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成。--> <!--每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。--> </svg> <!--<script>--> <!--var width = 300; //画布的宽度--> <!--var height = 300; //画布的高度--> <!--var svg = d3.select("body") //选择文档中的body元素--> <!--.append("svg") //添加一个svg元素--> <!--.attr("width", width) //设定宽度--> <!--.attr("height", height); //设定高度--> <!--var dataset = [ 250 , 210 , 170 , 130 , 90 ];--> <!--var rectHeight = 25; //每个矩形所占的像素高度(包括空白)--> <!--svg.selectAll("rect")--> <!--.data(dataset)--> <!--.enter()--> <!--.append("rect")--> <!--.attr("x",20)--> <!--.attr("y",function(d,i){--> <!--return i * rectHeight;--> <!--})--> <!--.attr("width",function(d){--> <!--return d;--> <!--})--> <!--.attr("height",rectHeight-2)--> <!--.attr("fill","steelblue");--> <!--</script>--> </body> </html>11、 <text>属性介绍
- (x,y)是文本左下角的坐标
- dx(dx1,……)是文本相对基点x向右偏移的距离
- dy(dy1,……)是文本相对基点y向下偏移的距离
- text-anchor文本相对基点(x,y)的位置
- start 文字在基点的右上方
- middle 文字在基点的正上方
- end 文字在基点的左上方
- textLength 文本长度
- lengthAdjust 调整文本的收缩或扩张方式,与textLength属性配合使用
- spacing 单个文字大小不变,只收缩或扩张间距
- spacingAndGlyphs 文字和间距一起扩张或收缩
- transform 根据相应的变换矩阵,对元素进行变形
- matrix (<a> <b> <c> <d> <e> <f>)
- translate (<x> [<y>])
- scale (<x> [<y>])
- rotate (<a> [<x> <y>])
- skewX (<a>)
- skewY (<a>)
- <tspan>标签用在<text>标签内部,来给文本进行分块,使得每一块文本具有不同的样式。
- <textPath>标签用在<text>标签内部,来设置文本的路径。
- <a>标签用在<text>标签内部,将SVG元素作为一个超链接。
- 还有其它一些CSS通用属性:font-family、font-size等
SVG 元素
元素列中的链接指向了具体元素的相关属性和更多有用的信息。
元素 | 描述 |
---|---|
a | 定义超链接 |
altGlyph | 允许对象性文字进行控制,来呈现特殊的字符数据(例如,音乐符号或亚洲的文字) |
altGlyphDef | 定义一系列象性符号的替换(例如,音乐符号或者亚洲文字) |
altGlyphItem | 定义一系列候选的象性符号的替换 |
animate | 随时间动态改变属性 |
animateColor | 规定随时间进行的颜色转换 |
animateMotion | 使元素沿着动作路径移动 |
animateTransform | 对元素进行动态的属性转换 |
circle | 定义圆 |
clipPath | |
color-profile | 规定颜色配置描述 |
cursor | 定义独立于平台的光标 |
definition-src | 定义单独的字体定义源 |
defs | 被引用元素的容器 |
desc | 对 SVG 中的元素的纯文本描述 - 并不作为图形的一部分来显示。用户代理会将其显示为工具提示。 |
ellipse | 定义椭圆 |
feBlend | SVG 滤镜。使用不同的混合模式把两个对象合成在一起。 |
feColorMatrix | SVG 滤镜。应用matrix转换。 |
feComponentTransfer | SVG 滤镜。执行数据的 component-wise 重映射。 |
feComposite | SVG 滤镜。 |
feConvolveMatrix | SVG 滤镜。 |
feDiffuseLighting | SVG 滤镜。 |
feDisplacementMap | SVG 滤镜。 |
feDistantLight | SVG 滤镜。 Defines a light source |
feFlood | SVG 滤镜。 |
feFuncA | SVG 滤镜。feComponentTransfer 的子元素。 |
feFuncB | SVG 滤镜。feComponentTransfer 的子元素。 |
feFuncG | SVG 滤镜。feComponentTransfer 的子元素。 |
feFuncR | SVG 滤镜。feComponentTransfer 的子元素。 |
feGaussianBlur | SVG 滤镜。对图像执行高斯模糊。 |
feImage | SVG 滤镜。 |
feMerge | SVG 滤镜。创建累积而上的图像。 |
feMergeNode | SVG 滤镜。feMerge的子元素。 |
feMorphology | SVG 滤镜。 对源图形执行"fattening" 或者 "thinning"。 |
feOffset | SVG 滤镜。相对与图形的当前位置来移动图像。 |
fePointLight | SVG 滤镜。 |
feSpecularLighting | SVG 滤镜。 |
feSpotLight | SVG 滤镜。 |
feTile | SVG 滤镜。 |
feTurbulence | SVG 滤镜。 |
filter | 滤镜效果的容器。 |
font | 定义字体。 |
font-face | 描述某字体的特点。 |
font-face-format | |
font-face-name | |
font-face-src | |
font-face-uri | |
foreignObject | |
g | 用于把相关元素进行组合的容器元素。 |
glyph | 为给定的象形符号定义图形。 |
glyphRef | 定义要使用的可能的象形符号。 |
hkern | |
image | |
line | 定义线条。 |
linearGradient | 定义线性渐变。 |
marker | |
mask | |
metadata | 规定元数据。 |
missing-glyph | |
mpath | |
path | 定义路径。 |
pattern | |
polygon | 定义由一系列连接的直线组成的封闭形状。 |
polyline | 定义一系列连接的直线。 |
radialGradient | 定义放射形的渐变。 |
rect | 定义矩形。 |
script | 脚本容器。(例如ECMAScript) |
set | 为指定持续时间的属性设置值 |
stop | |
style | 可使样式表直接嵌入SVG内容内部。 |
svg | 定义SVG文档片断。 |
switch | |
symbol | |
text | |
textPath | |
title | 对 SVG 中的元素的纯文本描述 - 并不作为图形的一部分来显示。用户代理会将其显示为工具提示。 |
tref | |
tspan | |
use | |
view | |
vkern |
一、D3学习
1. 如何选择元素
在 D3 中,用于选择元素的函数有两个:
- d3.select():是选择所有指定元素的第一个
- d3.selectAll():是选择指定元素的全部
关于 select 和 selectAll 的参数,其实是符合 CSS 选择器的条件的,即用“井号(#)”表示 id,用“点(.)”表示 class。
<div><br class="Apple-interchange-newline"><p class="myclass">Pear</p><p class="myclass">Banana</p></div>
<p
class
=
"myclass"
>
Banana
</p>
|
1
2
|
var
p
=
body
.
selectAll
(
".myclass"
)
;
p
.
style
(
"color"
,
"red"
)
;
|
1
|
<p
id
=
"myid"
>
Pear
</p>
|
1
2
|
var
p2
=
body
.
select
(
"#myid"
)
;
p2
.
style
(
"color"
,
"red"
)
;
|
这两个函数返回的结果称为选择集。
例如,选择集的常见用法如下。
1
2
3
4
5
|
var
body
=
d3
.
select
(
"body"
)
;
//选择文档中的body元素
var
p1
=
body
.
select
(
"p"
)
;
//选择body中的第一个p元素
var
p
=
body
.
selectAll
(
"p"
)
;
//选择body中的所有p元素
var
svg
=
body
.
select
(
"svg"
)
;
//选择body中的svg元素
var
rects
=
svg
.
selectAll
(
"rect"
)
;
//选择svg中所有的svg元素
|
选择集和绑定数据通常是一起使用的。