d3.js 基础 － 一个数据可视化相关的 javascript 库

2016-04-07

本文谈谈 d3 中的数据绑定、scale、坐标轴。

一、d3.js 介绍

1. d3 是什么？

d3.js 是一个用于制作数据可视化相关的 javascript 工具库，你可以在 d3.js 官网 中找到数之不尽的、使用 d3 绘制的精美数据可视化图像。

d3.js 是基于 svg 的函数库，（其实也支持 canvas，但 api 不够丰富）

2. 为什么要使用 d3 ？

若你的项目是数据相关的，且需要大量定制化的图表时，d3.js 会是一个很好的选择。

曾使用过 highchart.js , echart.js(百度)，这两者都是很好的图表库，可满足于常见的通用图表，如柱状图、饼图、折线图、地图等等。但无论是 highchart 还是 echart，这类图表库能提供的图表毕竟是有限的，即便它们提供的图表越来越丰富（如也涵盖了许多高级复杂图表）、灵活性（可配置项）越来越高，但无法随心所欲，绘制出你天马星空的所思所想。

3. 一个标准、常见的 d3.js 操作流程如下：

d3.select(".chart")
    // 若 .chart 下没有任何 div, 返回空数组
    .selectAll("div")

    // 数据绑定
    .data(data)

    // 此刻返回的是一系列占位符
    .enter()

    // 插入 DOM 结点
    .append("div")

    // 设置样式
    .style("width", function(d) { return d * 10 + "px"; })

    // 插入文字
    .text(function(d) { return d; });

其核心包括：选择器，数据绑定，DOM 操作，样式与文字；

二、选择器

• d3 与 css3 选择器保持一致，如支持标签 "div", 类名 ".awesome", id "#foo", 属性 "[color=red]", 层级 "parent child"等等；
• select() 和 selectAll()，单选和多选区别。

三、数据绑定

d3 在处理数据方面，有三种状态，enter(), exit() 和 update。

• enter() － 处理新加入的数据
• exit() － 处理已废弃的数据
• update - 更新数据 （内部操作）

缺省状态下，d3 根据序号（index）来进行数据绑定

data-join.png

将 elements 与数据集(datas)，一对对拿出来看：(elements 对应于 d3 渲染在页面上的 dom 结点。)

• 如果 elements 内部属性 data 中存的值不等于 data，则 update();
• 如果 datas 的长度大于 elements 长度，多余的那些 data 都属于 enter 范畴；
• 如果 datas 的长度小于 elements 长度，多余的那些 elements 都属于 exit 范畴；

指定了参照值的情况下：（即在调用 .data() 绑定数据时，再传入 key function 指定特定的 key ）

elements 内部属性 data 中存的值与实际 data 对比，若：

• 相等， update()
• 不相等，原值放入 exit(); 新增放入 enter();

constancy.png

与顺序无关

order.png

四、缩放 scale (或者翻译成 “比例尺”)

作用：将数据集与我们希望的视图大小映射起来，如 datas =[1,2,3],也许我们希望展现在屏幕中的是 [100px, 200px, 300px];

• domain() data space － 设置输入域，相当于数学中的 “定义域”
• range() display space - 设置输出范围，相当于数学中的 “值域”

1. 连续的 － 如 [0, 100]

• 最常用的是线性缩放 linear()，既 y = mx+b。 其中 m 与 b 通过 domain 和 range 计算可得；
• 除此之外的函数还有 pow(), sqrt(), log() 等。

2. 离散的 － 即定义域和值域并非是连续变化的。如 ['A', 'B', 'C', 'D']

• ordinal() 序数缩放

好玩之处

• .range("green", 'blue') 出现从绿到蓝的渐变颜色值；
• .clamp(true) 限定界限，越出后即截取掉。

五、坐标轴

由 , , 组成

• d3.svg.axis()
• scale()：指定缩放。
• orient()：指定刻度的朝向，如 'top', left' 等
• ticks()：指定刻度的数量。
• call()：将当前的选择集作为参数传递给此函数

六、资料

官网学习资料好齐全，讲解的也很赞。下面几篇基本都是从官网上找到链接的。

• Let’s Make a Bar Chart, Parts I, Parts II, Parts III
• Thinking with Joins
• Video: Introduction to D3 - Curran Kelleher, Bay Area D3 Meetup, April 2015
• Video: Beautiful Data with D3 - Andrew Burgess - 20 Jan 2014 - tuts+