D3.js学习笔记(六)——SVG基础图形和D3.js
目标
在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形。
这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性。
使用D3.js画一个SVG 的 圆 circle
可以使用如下代码创建:
1
2
3
|
<svg width=
"50"
height=
"50"
>
<circle cx=
"25"
cy=
"25"
r=
"25"
fill=
"purple"
/>
</svg>
|
我们在前面的章节已经讲过了使用D3.js来创建SVG圆形。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
var
jsonCircles = [
{
"x_axis"
:30,
"y_axis"
:30,
"radius"
:20,
"color"
:
"greeen"
},
{
"x_axis"
:70,
"y_axis"
:70,
"radius"
:20,
"color"
:
"purple"
},
{
"x_axis"
:110,
"y_axis"
:100,
"radius"
:20,
"color"
:
"red"
}
];
var
svgContainer = d3.select(
"body"
).append(
"svg"
)
.attr(
"width"
,200)
.attr(
"height"
,200);
var
circles =svgContainer.selectAll(
"circle"
)
.data(jsonCircles)
.enter()
.append(
"circle"
);
var
circleAttributes = circles
.attr(
"cx"
,
function
(d){
return
d.x_axis;})
.attr(
"cy"
,
function
(d){
return
d.y_axis;})
.attr(
"r"
,
function
(d){
return
d.radius;})
.style(
"fill"
,
function
(d){
return
d.color;});
|
将上述例子化简后,可以看做这一过程为两步:
- 创建SVG容器(SVG坐标空间)
- 画圆形
因此,在最简单的情况,JavaScript代码为:
1
2
3
4
5
6
7
8
9
10
|
//创建一个SVG容器
var
svgContainer = d3.select(
"body"
).append(
"svg"
)
.attr(
"width"
,200)
.attr(
"height"
,200);
//画圆形
var
circle = svgContainer.append(
"circle"
)
.attr(
"cx"
,30)
.attr(
"cy"
,30)
.attr(
"r"
,20);
|
画圆的时候,必须的SVG属性是:“cx”、“cy”以及“r”。
注意——如果我们缺省了“style”-样式函数,那么我们得到的就是一个黑色的圆形。不过也还好,因为首要的是先画出来圆形,之后在考虑的是样式。
在此要强调的是,使用D3.js画SVG的圆形时,最为重要的属性是:cx,cy和r。
使用D3.js画SVG的 长方形 Rectangle
我们可以用下面的代码画出一个长方形:
1
2
3
|
<svg width=
"50"
height=
"50"
>
<rect x=
"0"
y=
"0"
width=
"50"
height=
"50"
fill=
"green"
/>
</svg>
|
通过前面的圆形例子,我们大概可以猜得出,创建一个长方形,必须的是“x”,"y","width"以及"height".
我们也可以把画长方形分成两步:
- 创建一个SVG容器(SVG坐标空间)
- 画长方形
因此,在最简单的情况下,我们的JavaScript代码如下:
1
2
3
4
5
6
7
8
9
10
11
|
//创建一个SVG容器
var
svgContainer = d3.select(
"body"
).append(
"svg"
)
.attr(
"width"
,200)
.attr(
"height"
,200);
//画长方形
var
rectangle = svgContainer.append(
"rect"
)
.attr(
"x"
,10)
.attr(
"y"
,10)
.attr(
"width"
,50)
.attr(
"height"
,100);
|
画长方形的必须属性是“x”、"y"、"width"以及"height"。
注意—同上,如果缺省Style()方法,得到的是黑色的长方形。
两个需要注意的点是:
- SVG中指代长方形(rectangle)的关键词是rect。因此我们写的是.append("rect")而不是.append("rectangle")。
- SVG坐标系统的布局中,高height是自上而下的。
在此要强调的是,使用D3.js画SVG的长方形时,最为重要的属性是:x,y,width和height。
使用D3.js画SVG的 直线 Straight Line
使用下面的代码可以创建直线:
1
2
3
|
<svg width=
"50"
height=
"50"
>
<line x1=
"5"
y1=
"5"
x2=
"40"
y2=
"40"
stroke=
"grey"
stroke-width=
"5"
/>
</svg>
|
同样的,我们大概猜到画直线必须的是:"x1","y1","x2","y2".
我们同样可以分为两步:
- 创建SVG容器(SVG坐标空间)
- 画直线
最简单的例子为:
1
2
3
4
5
6
7
8
9
10
11
|
//创建SVG容器
var
svgContainer = d3.aelect(
"body"
).append(
"svg"
)
.attr(
"width"
,200)
.attr(
"height"
,200);
//画直线
var
line = svgContainer.append(
"line"
)
.attr(
"x1"
,5)
.attr(
"y1"
,5)
.attr(
"x2"
,50)
.attr(
"y2"
,50)
|
我们画的直线在哪了???SVG元素就在那里,但是我们却看不到。
这是因为SVG的“line”元素就仅仅是“线",在几何学上讲是一维的,他是没有大小粗细的,没有所谓的“内部”。
这也就是说,“line”元素不可能被“填充(filled)”(即fill属性)。
也就是说,直线是不占用空间的——因此实际上,我们什么都看不到。
为了解决这个问题,我们需要确保:
- .attrbute("stroke-width",NUMBER),其中的NUMBER是指直线的宽
- .attribute("stroke","COLOR"),其中COLOR是指用来给直线着色的颜色
因此,修改后的最简例子为:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
//创建一个SVG容器
var
svgContainer = d3.select(
"body"
).append(
"svg"
)
.attr(
"width"
,200)
.attr(
"height"
,200);
//画直线
var
line = svgContainer.append(
"line"
)
.attr(
"x1"
,5)
.attr(
"y1"
,5)
.attr(
"x2"
,50)
.attr(
"y2"
,50)
.attr(
"stroke"
,
"black"
)
.attr(
"stroke-width"
,2);
|
太棒了!现在看的到啦!
画直线必须的SVG属性是"x1","y1","x2","y2","stroke"以及"stroke-width"。
注意-这里我们没有使用style方法,因为‘line’元素只是‘线’而已,没有“内部”可言,也就没有什么填充色之类的,在几何学上将,它是一维的。所以,我们在设置其样式的时候,就需要设置“stroke”颜色以及“stroke-width”。
使用D3.js画折线和多边形
在基本图形中,我们还应该画“折线(polyline)”和“多边形(polygon)”。
可以通过下面的代码创建SVG折线和多边形:
折线 代码:
1
2
3
4
5
6
7
8
|
<svg width=
"50"
height=
"50"
>
<polyline fill=
"none"
stroke=
"blue"
stroke-width=
"2"
points =
"05,30
15,30
15,20
25,20
35,10 "
/>
</svg>
|
多边形 代码:
1
2
3
4
5
6
7
8
|
<svg width=
"50"
height=
"50"
>
<polygon fill=
"yellow"
stroke=
"blue"
stroke-width=
"2"
points=
"05,30
15,30
25,20
25,10
35,10"
/>
</svg>
|
通过上面这些圆形、长方形、直线的例子,你大概能猜到,要创建一个折线 和 多边形 图形,需要的属性是:“stroke”、“stroke-width”以及“points”。对于多边形Polygon还需要“fill”属性。
然而,正如你所看到的,points属性包含了一个点(point)列表,其中节点的x,y值由逗号隔开,每对坐标值之间通过空格隔开。
这样做很不美观。D3.js热衷于数据可视化以及美好的事物,d3.js的惯例是使用D3.svg.line()生成器来画折线和多边形。
为了能够使用D3.js创建SVG基本图形折线(Polyline)和多边形(Polygon),我们将必须学习SVG Paths。