您的位置：首页 > 其它

绘制标准的d3图表

2015-03-25 20:20 176 查看

使用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库进行开发的大致流程如下：

1. 准备工作，创建页面，引入d3库

2. 加载数据

3. 创建比例尺

4. 创建SVG

5. 注入数据绘制图像，设置过度动画，绑定交互事件

6. 添加辅助信息（数轴、提示标签、气泡等）

因为d3在对数据遍历的同时创建图像这种机制，第5步的三个动作通常是同时添加。

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

d3官网：http://d3js.org/
api文档：https://github.com/mbostock/d3/wiki/Api-%E5%8F%82%E8%80%83
书籍推荐：《数据可视化实战:使用D3设计交互式图表》

我们先来看一个基本的d3程序：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础条形图</title>
</head>
<body>
<div id="chart"></div>

<script src="js/d3.v3.min.js"></script>
<script>

drawLineBar('#chart')

function drawLineBar(selector) {

// 示例数据
var dataset = [ 5, 10, 15, 20, 30, 50 ]
var width = 500,
height = 500

// 创建线性比例尺
var scale = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([0, height])
// 创建svg
var svg = d3.select(selector)
.append('svg')
.attr('width', width)
.attr('height', height)

// 绘制条形图
svg.selectAll('rect')
.data(dataset)
.enter()
.append('rect')
.attr('width', '20px')
.attr('height', function(d, i) {

return scale(d)
})
.attr('y', function(d, i) {

return height - scale(d)
})
.attr('x', function(d, i) {

return i * (width / dataset.length)
})
.attr('fill', '#457eb4')     }

</script>
</body>
</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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航