d3.js 基础 － 一个数据可视化相关的 javascript
2016-08-16 本文已影响368人
HeyDelilah
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)限定界限，越出后即截取掉。
五、坐标轴
由 <g>, <line>, <text> 组成
- d3.svg.axis()
- scale()：指定缩放。
- orient()：指定刻度的朝向，如 'top', left' 等
- ticks()：指定刻度的数量。
- call()：将当前的选择集作为参数传递给此函数
六、资料
官网学习资料好齐全，讲解的也很赞。下面几篇基本都是从官网上找到链接的。
