d3相关知识整理

时间：2015-03-25 21:22:49 收藏：0 阅读：219

d3是基于svg的数据可视化库，提供风格类似jquery，易于上手。仅支持ie9及以上浏览器。据说使用aight可以兼容ie8（没用过），r2d3通常是我的最终方案，可以在部分情况下兼容ie7。另外，d3本身虽然提供了丰富的图形绘制函数，但最终决定效果的还是数据，d3的一切绘制都是以数据作为基础。

本着喂饱的精神，提供以下资料:

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。

效果如下：

原文：http://www.cnblogs.com/sunken/p/4366824.html