D3基礎--數軸

時間 2019-11-12

標籤 d3 基礎數軸简体版

原文原文鏈接

轉載請註明出處！javascript

概述：css

與比例尺相似，D3的數軸實際上也使用來定義參數的函數。但與比例尺不一樣的是，調用數軸函數並不會返回值，而是會生成數軸相關的可見元素。包括：軸線，標籤和刻度。html

可是要注意數軸函數只適應於SVG圖形，由於他們生成的都是SVG元素，一樣，數軸是設計與定量比例尺（與序數比例尺相對）配合使用的。java

定義和建立X軸：瀏覽器

 1 //定義x軸
 2 
 3 var xAxis = d3.svg.axis()
 4                   .scale(xScale)  
 5                   .orient("bottom");
 6 
 7  
 8 //建立x軸
 9 
10 svg.append("g")
11       .call(xAxis);

上面的代碼首先引用了svg，而後append()在這個元素的末尾追加了一個新的g元素。在SVG標籤中，g元素是一個分組元素。分組元素是不可見的，跟line，rect和circle不同，可是他有兩大用途：app

一是能夠用來包含（或組織）其餘元素，好讓代碼看起來整齊；dom

二是能夠對整個分組應用變換，從而影響到該分組中全部元素（line，rect和circle）的視覺表現。svg

建立了新的g元素後，咱們直接在這個元素上調用了call()方法，call()的做用以下：函數

D3的call()方法回去的傳遞過來的元素，而後把它交給其餘函數，對咱們這而言，傳遞過來的元素是新的分組元素g（雖然這個元素不是必須的，可是鑑於數軸函數須要生成不少線條和數值，有了它能夠把全部的元素都封裝到一個分組對象中）。而call()接着把g元素交給xAxis函數，也就是要在g元素中生成數軸。oop

效果圖：

修整數軸：

首先給新建立的g元素添加一個axis類，而後爲他添加CSS樣式：

1 svg.append("g")
2 
3 .attr(「class」, 「axis」)
4 
5 .call(xAxis);

 1 .axis path,
 2 
 3 .axis line {
 4 
 5     fill: none;
 6 
 7     stroke: black;
 8 
 9     shape-rendering: crispEdges;
10 
11 }
12 
13  
14 
15 .axis text {
16 
17     font-family: sans-serif;
18 
19     font-size: 11px;
20 
21 }

如今就體現出把全部數軸元素組織到一個分組g中的好處了，只要使用簡單的CSS選擇符.axis就能爲其中的任何元素添加樣式。數週自己是由path，line和text元素組成的，所以上面的css樣式瞄準這三個元素。注意，上面經過css對SVG元素使用樣式的時候，只能使用SVG認識的屬性名。（SVG的屬性能夠參照MDN網站）。

調整座標位置到圖表下面：

1 svg.append("g")
2     .attr("class", "axis")
3     .attr("transform", "translate(0," + (h - padding) + ")")
4     .call(xAxis);

經過設置g元素的屬性transform。SVG的變換功能很是強大這兒先介紹平移（transform）變換。他能夠把整個g分組向下平移一段距離。

平移變換的語法很簡單，就是translate(x, y)，x,y就是把元素移動到新位置的x和y座標。能夠在瀏覽器中查看ＤＯＭ元素g。

效果圖：

優化刻度：

數軸上的刻度線（ticks）使用來傳達信息的，也不是越多越好。能夠用ticks()方法粗略的指定刻度線的數量。注意，D3只是把ticks的值當作一個參考，若是發現有更清晰方便理解的值，那麼他就會捨棄ticks的值。

1 var xAxis = d3.svg.axis()
2                   .scale(xScale)
3                   .orient("bottom")
4                   .ticks(5);  //粗略的設置刻度線的數量

垂直數軸：

1 var yAxis = d3.svg.axis()
2                   .scale(yScale)
3                   .orient("left")
4                   .ticks(5);

一樣設置起始座標：

1 //Create Y axis
2 svg.append("g")
3     .attr("class", "axis")
4     .attr("transform", "translate(" + padding + ",0)")
5     .call(yAxis);

效果圖：

最終代碼：

  1 <!DOCTYPE html>
  2 
  3 <html lang="en">
  4 
  5          <head>
  6 
  7                    <title>D3: Test of formatted axis values</title>
  8 
  9                    <script type="text/javascript" src="../d3/d3.js"></script>
 10 
 11                    <style type="text/css">
 12                             .axis path,
 16 
 17                             .axis line {
 18 
 19                                      fill: none;
 20 
 21                                      stroke: black;
 22 
 23                                      shape-rendering: crispEdges;
 24 
 25                             }
 26                            .axis text {
 30 
 31                                      font-family: sans-serif;
 32 
 33                                      font-size: 11px;
 34 
 35                             }
 39                    </style>
 40 
 41          </head>
 42 
 43          <body>
 44 
 45                    <script type="text/javascript">

 49                             //Width and height
 50 
 51                             var w = 500;
 52 
 53                             var h = 300;
 54 
 55                             var padding = 30;
 56 
 59                             /*
 60 
 61                             //Static dataset
 62 
 63                             var dataset = [
 64 
 65                                                                  [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
 66 
 67                                                                  [410, 12], [475, 44], [25, 67], [85, 21], [220, 88],
 68 
 69                                                                  [600, 150]
 70 
 71                                                           ];
 72 
 73                             */
 74 
 77                             //動態隨機生成數據集
 78 
 79                             var dataset = [];                                             //Initialize empty array
 80 
 81                             var numDataPoints = 50;                                     //Number of dummy data points to create
 82 
 83                             var xRange = Math.random() * 1000;     //Max range of new x values
 84 
 85                             var yRange = Math.random() * 1000;     //Max range of new y values
 86 
 87                             for (var i = 0; i < numDataPoints; i++) {       //Loop numDataPoints times
 88 
 89                                      var newNumber1 = Math.floor(Math.random() * xRange);   //New random integer
 90 
 91                                      var newNumber2 = Math.floor(Math.random() * yRange);   //New random integer
 92 
 93                                      dataset.push([newNumber1, newNumber2]);    //Add new number to array
 94 
 95                             }
 96 
 99                             //Create scale functions
100 
101                             var xScale = d3.scale.linear()
102 
103                                                     .domain([0, d3.max(dataset, function(d) { return d[0]; })])
104 
105                                                       .range([padding, w - padding * 2]);
106 
107  
108 
109                             var yScale = d3.scale.linear()
110 
111                                                  .domain([0, d3.max(dataset, function(d) { return d[1]; })])
112 
113                                                  .range([h - padding, padding]);
114 
115  
116 
117                             var rScale = d3.scale.linear()
118 
119                                                   .domain([0, d3.max(dataset, function(d) { return d[1]; })])
120 
121                                                   .range([2, 5]);
122 
123                             //爲刻度標籤訂義樣式（這個例子只是作說明並沒有太大實際意義）
124 
125                             var formatAsPercentage = d3.format(".1%");
126 
127  
128 
129                             //Define X axis
130 
131                             var xAxis = d3.svg.axis()
132 
133                                                 .scale(xScale)
134 
135                                                 .orient("bottom")
136 
137                                                 .ticks(5)
138 
139                                                 .tickFormat(formatAsPercentage);
140 
143                             //Define Y axis
144 
145                             var yAxis = d3.svg.axis()
146 
147                                                .scale(yScale)
148 
149                                                .orient("left")
150 
151                                                .ticks(5)
152 
153                                                //對數軸刻度應用定義的格式化函數（觀察座標軸）
154 
155                                                .tickFormat(formatAsPercentage);
156 
157  
158 
159                             //Create SVG element
160 
161                             var svg = d3.select("body")
162 
163                                          .append("svg")
164 
165                                          .attr("width", w)
166 
167                                          .attr("height", h);
168 
169  
170 
171                             //Create circles
172 
173                             svg.selectAll("circle")
174 
175                                .data(dataset)
176 
177                                .enter()
178 
179                                .append("circle")
180 
181                                .attr("cx", function(d) {
182 
183                                            return xScale(d[0]);
184 
185                                })
186 
187                                .attr("cy", function(d) {
188 
189                                            return yScale(d[1]);
190 
191                                })
192 
193                                .attr("r", function(d) {
194 
195                                            return rScale(d[1]);
196 
197                                });
198 
199  
200 
201                             /*註釋掉各點旁邊的標籤
202 
203                             //Create labels
204 
205                             svg.selectAll("text")
206 
207                                .data(dataset)
208 
209                                .enter()
210 
211                                .append("text")
212 
213                                .text(function(d) {
214 
215                                            return d[0] + "," + d[1];
216 
217                                })
218 
219                                .attr("x", function(d) {
220 
221                                            return xScale(d[0]);
222 
223                                })
224 
225                                .attr("y", function(d) {
226 
227                                            return yScale(d[1]);
228 
229                                })
230 
231                                .attr("font-family", "sans-serif")
232 
233                                .attr("font-size", "11px")
234 
235                                .attr("fill", "red");
236 
237                           */
238 
241                             //Create X axis
242 
243                             svg.append("g")
244 
245                                      .attr("class", "axis")
246 
247                                      .attr("transform", "translate(0," + (h - padding) + ")")
248 
249                                      .call(xAxis);
250 
251                            
252 
253                             //Create Y axis
254 
255                             svg.append("g")
256 
257                                      .attr("class", "axis")
258 
259                                      .attr("transform", "translate(" + padding + ",0)")
260 
261                                      .call(yAxis);
262 
265                    </script>
266 
267          </body>
268 
269 </html>