D3.js学习笔记（四）—— 使用SVG坐标空间
目标
在这一章，你将要使用D3.js基于一些数据把SVG元素添加到你想要的坐标位置上。
我们的目标就是使用下面的数据集：
1 var spaceCircles = [30,70,110];
并使用D3.js来对这些数据进行可视化：
数学/图形 坐标空间(Mathematical/Graph Coordinate Space)
在我们使用D3.js基于一些数据把SVG元素添加到指定的坐标位置之前，我们先来讨论下坐标空间。
我们了解一些基础数学中的基础数学图形(mathematical graphs).
这些图形都是画在长方形的、二维平面空间。
这些图形的坐标空间中，x=0,y=0的坐标都是位于左下方。
这些图的X坐标轴是有左向右递增。
这些图的Y坐标轴是右下向上递增。
也就说，当我们想画一个坐标为x=30，y=30的圆，我们只要从左下方向右走30个单位，然后再向上走30个单位，就到了目的地。
SVG坐标空间
SVG坐标空间与数学图形坐标空间原理基本一样，除了下面两点：
1-SVG坐标空间中，x=0以及y=0的坐标是在左上方。
2-SVG坐标空间中，Y坐标轴的增长方式是自上而下。
也就是说，随着Y值变大，坐标位置是向下移动的，而不是向上。
因此，当我们说在SVG坐标空间里画一个圆，圆心是x=30，y=30，那就要从左上方出发，向右走30单位，然后向下走30单位。
.append('svg')：添加一个坐标空间
当我们创建一个D3.js的可视化，我们一直使用的代码是：
1 var svgContainer = d3.select("body").append("svg") 2 .attr("width",200) 3 .attr("width",200);
上面的代码为我们创建了下面的HTNL SVG元素：
到目前为止，我们一直忽略不去探讨SVG元素。No longer！
我们可以把SVG元素看做是一个宽200单位，高200单位的图（graph）。
通过在上面的“SVG坐标空间”中，我们了解了X和Y轴的0点是在左上方。
现在，我们也知道了，随着Y坐标增大，坐标是从坐标空间自上而下移动。
为了更清楚的看到，我们对SVG元素设置如下设置其样式：
1 var svgContainer = d3.select("body").append("svg") 2 .attr("width",200) 3 .attr("height",200) 4 .style("border","1px solid black");
结果是：
通过上面得到的结果，有利于我们在数据可视化的时候，更好的使用逆序的Y坐标系统。
把SVG元素布局在SVG坐标空间
我们可以用下面的代码，添加一个SVG圆形元素：
1 <svg width="50" height="50"> 2 <circle cx="25" cy="25" r="25" fill="purple" /> 3 </svg>
cx代表圆心是在SVG上自左向右移动25单位。
cy代表圆心是在SVG上自上而下移动25单位。
回顾我们使用D3.js创建SVG圆形：
1 var circleSelection = svgSelection.append("circle") 2 .attr("cx",25) 3 .attr("cy",25) 4 .attr("r",25) 5 .style("fill","purple");
其中，.attr("cx",25)和.attr("cy",25)让我们可以设置SVG圆形的属性。
正如我们在前一章看到的，我么可以动态的（programmatically）设置这些属性：
1 var circleAttributes = circles 2 .attr("cx", 50) 3 .attr("cy", 50) 4 .attr("r", function (d) { return d; });
但是这一次，我们不是在“半径”r属性内使用函数，而是在cx和cy属性中使用函数。
创建一个SVG元素来持有SVG的元素
依然是从这个基础页面开始：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script type="text/javascript" src="d3.v2.min.js"></script> 5 </head> 6 <body> 7 </body> 8 </html>
我们还是使用Chrome浏览器，进入开发者工具模式。
在JavaScript控制台输入代码：
1 var spaceCircles = [30,70,110]; 2 3 var svgContainer = d3.select("body").append("svg") 4 .attr("width",200) 5 .attr("height",200);
上面的代码定义了数据集，以及用来持有SVG圆形元素的SVG元素：
把数据绑定到SVG圆形元素
接下来我们要把数据绑定到SVG圆形元素上：
1 var spaceCircles = [30, 70, 110]; 2 3 var svgContainer = d3.select("body").append("svg") 4 .attr("width", 200) 5 .attr("height", 200); 6 7 var circles = svgContainer.selectAll("circle") 8 .data(spaceCircles) 9 .enter() 10 .append("circle");
我们在页面上添加了三个SVG的圆形元素：
使用绑定的数据来更改SVG圆形的坐标
现在已经把数据绑定到了SVG的圆形元素上，我们可以使用这些数据来设置x坐标和y坐标。
D3.js允许我们在“cx”和“cy”属性中使用函数：
1 var spaceCircles = [30,70,110]; 2 3 var svgContainer = d3.select("body").append("svg") 4 .attr("width",200) 5 .attr("height",200); 6 7 var circles = svgContainer.selectAll("circle") 8 .data(spaceCircles) 9 .enter() 10 .append("circle"); 11 12 var circleAttributes = circles 13 .attr("cx",function(d){return d;}) 14 .attr("cy",function(d){return d;}) 15 .attr("r",20);
结果是：
现在我们离目标和很近了，我们已经使用了数据集中的坐标值创建了三个SVG circle元素。最后要做的事，就是根据数据来对SVG圆形着色。
回顾——依据数据设置SVG元素的样式
如果你还记得我们前面“根据数据创建SVG元素”章节的话，在那里我们使用绑定数据更改SVG元素的样式。
正如我们之前看到的，D3.js允许我们在.style()操作符内部使用函数——这意味着我们可以这么写代码：
1 var spaceCircles = [30,70,110]; 2 3 var svgContainer = d3.select("body").append("svg") 4 .attr("width",200) 5 .attr("height",200); 6 7 var circles = svgContainer.selectAll("circle") 8 .data(spaceCircles) 9 .enter() 10 .append("circle"); 11 12 var circleAttributes = circles 13 .attr("cx",function(d){return d;}) 14 .attr("cy",function(d){return d;}) 15 .attr("r",20) 16 .style("fill",function(d){ 17 var returnColor; 18 if(d===30){returnColor = "green"; 19 }else if(d===70){returnColor = "purple"; 20 }else if(d===110){returnColor = "red";} 21 return returnColor; 22 });
在JavaScript控制台中运行后的结果是：
Congratulations - You created, styled, and placed SVG elements in the SVG Coordinate Space based on data from a data set!噢耶~~
