繪製標準的d3圖表

時間 2019-11-11

標籤繪製標準 d3 圖表简体版

原文原文鏈接

使用d3開發一年有餘，我認爲d3是一個可定製化程度高，但複用性差，開發流程卻相對固定的庫。在這對d3應用的標準流程作一個整理，但願對你有所幫助。

因爲d3自己是基於svg，提供風格相似jquery的dom操做。因此在圖形數目（dom節點）較多的狀況下，存在嚴重的性能問題。相比canvas，svg的優缺點都是十分明顯的。

先說優勢：

1. SVG（Scalable Vector Graphics）是矢量圖形

2. SVG會生成dom節點，便於用戶進行交互

再說缺點：

1. 改變dom會致使瀏覽器重排重繪，效率低下

2. 暴露繪圖數據

3. 僅支持ie9及以上瀏覽器

聽說使用aight能夠兼容ie8（沒用過），r2d3一般是個人解決方案，能夠在部分狀況下兼容ie7。

使用d3庫進行開發的大體流程以下：html

1. 準備工做，建立頁面，引入d3庫jquery

2. 加載數據git

3. 建立比例尺github

4. 建立SVGjson

5. 注入數據繪製圖像，設置過分動畫，綁定交互事件canvas

6. 添加輔助信息（數軸、提示標籤、氣泡等）api

由於d3在對數據遍歷的同時建立圖像這種機制，第5步的三個動做一般是同時添加。數組

本着餵飽的精神，提供如下資料:

d3官網： http://d3js.org/

api文檔：https://github.com/mbostock/d3/wiki/Api-%E5%8F%82%E8%80%83

書籍推薦：《數據可視化實戰:使用D3設計交互式圖表》

咱們先來看一個基本的d3程序：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>基礎條形圖</title>
 6 </head>
 7 <body>
 9     <div id="chart"></div>
10 
11     <script src="js/d3.v3.min.js"></script>
12     <script>
13 
14     drawLineBar('#chart')
15 
17     function drawLineBar(selector) {
18 
19         // 示例數據
20         var dataset = [ 5, 10, 15, 20, 30, 50 ]
21         var width = 500,
22             height = 500
23 
24         // 建立線性比例尺
25         var scale = d3.scale.linear()
26             .domain([0, d3.max(dataset)])
27             .range([0, height])30 
31         // 建立svg
32         var svg = d3.select(selector)
33             .append('svg')
34             .attr('width', width)
35             .attr('height', height)
36 
37         // 繪製條形圖
38         svg.selectAll('rect')
39             .data(dataset)
40             .enter()
41             .append('rect')
42             .attr('width', '20px')
43             .attr('height', function(d, i) {
44 
45                 return scale(d)
46             })
47             .attr('y', function(d, i) {
48 
49                 return height - scale(d)
50             })
51             .attr('x', function(d, i) {
52 
53                 return i * (width / dataset.length)
54             })
55             .attr('fill', '#457eb4')77     }
78 
79     </script>
80 </body>
81 </html>