目标
在这一章，我们将会重温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;}); |
将上述例子化简后，可以看做这一过程为两步：
因此，在最简单的情况，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".
我们也可以把画长方形分成两步：
因此，在最简单的情况下，我们的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()方法，得到的是黑色的长方形。
两个需要注意的点是：
在此要强调的是，使用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".
我们同样可以分为两步：
最简单的例子为：
|
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属性）。
也就是说，直线是不占用空间的——因此实际上，我们什么都看不到。
为了解决这个问题，我们需要确保：
因此，修改后的最简例子为：
|
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。
原文：http://www.cnblogs.com/winleisure/p/3517998.html