目標
在這一章，你將要使用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!噢耶~~