D3.js學習筆記（四）—— 使用SVG座標空間

時間 2019-12-14

標籤 d3.js 學習筆記使用 svg 座標空間欄目 JavaScript 简体版

原文原文鏈接

目標javascript

　　在這一章，你將要使用D3.js基於一些數據把SVG元素添加到你想要的座標位置上。html

　　咱們的目標就是使用下面的數據集：java

1 var spaceCircles = [30,70,110];

　　並使用D3.js來對這些數據進行可視化：瀏覽器

數學/圖形座標空間(Mathematical/Graph Coordinate Space)app

　　在咱們使用D3.js基於一些數據把SVG元素添加到指定的座標位置以前，咱們先來討論下座標空間。svg

　　咱們瞭解一些基礎數學中的基礎數學圖形(mathematical graphs).函數

　　這些圖形都是畫在長方形的、二維平面空間。工具

　　這些圖形的座標空間中，x=0,y=0的座標都是位於左下方。佈局

　　這些圖的X座標軸是有左向右遞增。spa

　　這些圖的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 　　　　　　　　　　　　　　　　　　　　});