目標
在這一章，你將會使用D3.js，基於我們的數據來把SVG元素添加到網頁中。這一過程包括：把數據綁定到元素上，然后在使用這些元素來可視化我們的數據。
注意：不同於前幾章，我們從一個完整的代碼開始，然后去一步步理解它，從這一章開始，我們將會從零開始構建我們的數據可視化。
我們的目標是使用這個數據集：
1 var circleRadii = [40,20,10];
然后用D3.js來將這個數據集進行數據可視化。
SVG的Circle元素
首先我們要知道的是SVG的Circle元素是什么？它是怎么定義的？
SVG的Circle元素是一個基本的SVG圖形元素。基本圖形元素（Basic shape element）是SVG中預定義的標准圖形。注意：這些圖形可以通過數學方式同樣得到（這些在后面會看到）。目前，我們要用到的就是基本SVG圖形元素。
圓形是通過使用SVG名詞”circle“創建的。
在定義圓形circle SVG圖形時，三個必不可少的屬性必須被附加：
- cx-圓心的x坐標
- cy-圓心的y坐標
- r-圓的半徑
創建一個 SVG元素 來控制（hold）SVG的元素
從下面這個初始頁面開始：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script type="text/javascript" src="d3.v3.min.js"></script> 5 </head> 6 <body> 7 </body> 8 </html>
打開JavaScript控制台和元素查閱器。
然后把下面這段代碼輸入JavaScript控制台：
1 var circleRadii = [40,20,10]; 2 3 var svgContainer = d3.select("body").append("svg") 4 .attr("width",200) 5 .attr("height",200);
上面的代碼給出了數據集以及一個SVG元素，這個SVG元素用來hold我們即將添加進來的SVG圓形：
數據綁定到SVG圓形上
接下來要把數據綁定到我們的DOM元素，也就是我們的SVG圓形上。
回想我們在把數據綁定到DOM元素那一章，我們是這么把數據綁定到DOM元素上的：
1 var theData = [ 1, 2, 3 ] 2 3 var p = d3.select("body").selectAll("p") 4 .data(theData) 5 .enter() 6 .append("p") 7 .text("hello ");
在本章的情況下，我們要做如下幾步：
- selectAll circle
- 綁定數據
- 選擇虛.enter()選集
- 添加SVG的circle元素
代碼如下：
1 var circleRadii = [40,20,10]; 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(circleRadii) 9 .enter() 10 .append("circle");
於是，我們在頁面上就添加了三個SVG的circle元素：
太棒了！盡管圓形還沒有出現。這是因為我們還沒有對每個圓形circle的屬性進行初始化。
如果我們把所有D3.js聲明放在一行JavaScript代碼中，並通過console.log()函數運行：
1 var circleRadii = [40,20,10]; 2 3 console.log(d3.select("body").append("svg").attr("width",200).attr("height",200).selectAll("circle").data(circleRadii).enter().append("circle"));
根據結果我們可以看到，我們的數據已經綁定到了SVG 圓形元素上了：
使用綁定的數據來更改SVG圓形
現在我們開始使用綁定的數據來更改SVG圓形。
回顧我們上一章的使用綁定到DOM元素的數據，我們是這樣使用綁定數據的：
1 var theData = [ 1, 2, 3 ] 2 3 var p = d3.select("body").selectAll("p") 4 .data(theData) 5 .enter() 6 .append("p") 7 .text( function (d) { return d; } );
使用綁定數據的關鍵是一個JavaScript函數：
1 function (d) { return d; }
同樣的，D3.js允許我們使用這個方程來更改SVG圓形的參數！也就是說，我們可以這么用：
1 circleRadii = [40,20,10]; 2 3 var svgContainer = d3.select("body").append("svg") 4 .attr("width",600) 5 .attr("height",100); 6 7 var circles = svgContainer.selectAll("circle") 8 .data(circleRadii) 9 .enter() 10 .append("circle"); 11 12 var circleAttributes = circles 13 .attr("cx",50) 14 .attr("cy",50) 15 .attr("r",function (d){return d;}) 16 .style("fill","green");
正如你所看到的，我們給circle選集添加了屬性。數據集中給出的是圓形半徑值，因此我們使用D3.js更新了每一個SVG circle元素的r屬性。
我們使用綁定數據來更改SVG圓形后，得到的結果是：
我們正在一步步靠近最終的目標。我們現在有了三個SVG circle元素，它們的半徑對應了數據集中給出的數值。我們最后要做的事，就是根據SVG circle的數值來着色。
根據數值（data）設置SVG元素的樣式
回顧前面的Adding an SVG Element 章節，我們使用D3.js的.style操作符來設置CSS樣式屬性。
D3.js允許我們在.style()操作符內部使用函數！也就是說，我們可以這樣做：
1 circleRadii = [40,20,10]; 2 3 var svgContainer = d3.select("body").append("svg") 4 .attr("width",600) 5 .attr("height",100); 6 7 var circles = svgContainer.selectAll("circle") 8 .data(circleRadii) 9 .enter() 10 .append("circle"); 11 12 var circleAttributes = circles 13 .attr("cx",50) 14 .attr("cy",50) 15 .attr("r",function (d){return d;}) 16 .style("fill",function (d){ 17 var returnColor ; 18 if (d===40){returnColor = "green"; 19 } else if (d===20){returnColor = "purple"; 20 } else if (d===10){returnColor = "red";} 21 return returnColor; 22 });
上面JavaScript代碼在JavaScript控制台上運行結果是：
Congratulations——你已經成功使用一個數據集中的數據創建了SVG元素，並設置了其樣式！