D3.js學習筆記（三）——建立基於數據的SVG元素

時間 2019-12-12

標籤 d3.js 學習筆記建立基於數據 svg 元素欄目 JavaScript 简体版

原文原文鏈接

目標javascript

　　在這一章，你將會使用D3.js，基於咱們的數據來把SVG元素添加到網頁中。這一過程包括：把數據綁定到元素上，而後在使用這些元素來可視化咱們的數據。html

　　注意：不一樣於前幾章，咱們從一個完整的代碼開始，而後去一步步理解它，從這一章開始，咱們將會從零開始構建咱們的數據可視化。java

　　咱們的目標是使用這個數據集：app

1 var circleRadii = [40,20,10];

　　而後用D3.js來將這個數據集進行數據可視化。svg

SVG的Circle元素函數

　　首先咱們要知道的是SVG的Circle元素是什麼？它是怎麼定義的？spa

　　SVG的Circle元素是一個基本的SVG圖形元素。基本圖形元素（Basic shape element）是SVG中預約義的標準圖形。注意：這些圖形能夠經過數學方式一樣獲得（這些在後面會看到）。目前，咱們要用到的就是基本SVG圖形元素。code

　　圓形是經過使用SVG名詞」circle「建立的。htm

　　在定義圓形circle SVG圖形時，三個必不可少的屬性必須被附加：blog

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