D3.js学习笔记（六）——SVG基础图形和D3.js

目标

　　在这一章，咱们将会重温SVG图形，学习如何使用D3.js来建立这些图形。

　　这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性。

使用D3.js画一个SVG 的 圆 circle

　　可使用以下代码建立：

<svg width="50" height="50">
    <circle cx="25" cy="25" r="25" fill="purple" />
</svg>

　　咱们在前面的章节已经讲过了使用D3.js来建立SVG圆形。

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;});

　　将上述例子化简后，能够看作这一过程为两步：

1. 建立SVG容器（SVG坐标空间）
2. 画圆形

　　所以，在最简单的状况，JavaScript代码为：

//建立一个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

　　咱们能够用下面的代码画出一个长方形：

<svg width="50" height="50">
<rect x="0" y="0" width="50" height="50" fill="green"/>
</svg>

　　经过前面的圆形例子，咱们大概能够猜得出，建立一个长方形，必须的是“x”,"y","width"以及"height".

　　咱们也能够把画长方形分红两步：

1. 建立一个SVG容器（SVG坐标空间）
2. 画长方形

　　所以，在最简单的状况下，咱们的JavaScript代码以下：

//建立一个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

　　使用下面的代码能够建立直线：

<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. 建立SVG容器（SVG坐标空间）
2. 画直线

　　最简单的例子为：

　　

//建立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是指用来给直线着色的颜色

　　所以，修改后的最简例子为：

//建立一个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折线和多边形：

　　折线 代码：

<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>

　　多边形 代码：

<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。