绘制标准的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>

关键的步骤我已经有写注释，这里稍做展开。

1. 加载数据，这里是直接写死在上面，一般会使用d3的加载函数。d3.csv、d3.tsv、d3.json。语法以下：

　　d3.json(url, callback)

　　- callback是可选项，因为是异步加载资源请注意

2. 建立比例尺，d3中的比例尺分为两种：线性比例尺d3.scale.linear和序数比例尺d3.scale.ordinal。这里用到的线性比例尺，须要设置domain和range。

domain是输入的值域，range是转换后的输出范围。在这里一般会用到两个经常使用函数，d3.max和d3.min。前者返回数组中的最大值，后者则返回最小值。

下面是很是常见的写法：

// 直接用最小值和最大值取值

domain(d3.min(array), d3.max(array))

// 输出要考虑留白和数轴的位置　　　　　　　　　　

range(d3.min(array) + padding, d3.max(array) - padding)　　

3. 建立svg

4. 绘制条形图，svg中常见的标准图形包括rect、circle、path、text、line和polygon

由于本人常常访问d3官网慢的出奇，因此这里没有使用d3官网的cdn。

效果以下：

相关源码能够访问个人github: https://github.com/luankefei/d3