Fork me on GitHub

d3js学习

frontend/d3/banner

D3.js是一个基于数据处理文档的JavaScript库。D3帮助你使用HTML,SVG和CSS将数据呈现出来。D3依赖于标准的web技术来绘制可视化的元素。

介绍

D3允许你将任意的数据绑定到文档对象模型(DOM),然后将数据驱动的转换应用到文档中。比如,可以使用D3将数组数据生成一个HTML文档。或者,使用相同的数据创建具有平滑过渡和交互的交互式SVG条形图。

D3不是一个旨在提供所有可能功能的单一框架。相方的,D3解决了问题的关键:根据数据有效地处理文档。这就避免了专有代理,并提供了非凡的灵活性,展示了诸如HTML,SVG和CSS等网络标准的全部功能。以最小的开销,D3非常快,支持大数据集和动态行为以进行交互和动画。D3的功能风格允许通过各种官方和开发社区模块来重复使用代码。

选择

使用W3C DOM API修改文档是很乏味的:方法名是冗长的,并且命令式的方法需要手动迭代和记账临时状态。比如下面改变段落的文字颜色:

1
2
3
4

<p> paragraph first </p>
<p> paragraph second </p>
<p>paragraph third </p>
1
2
3
4
5
6

var paragraphs = document.getElementsByTagName('p');
for(var i = 0; i < paragraphs.length; i++){
var paragraph = paragraphs.item(i);
paragraph.style.setProperty('color','blue');
}

D3采用了一种声明式的方法,使用选择(selection)操作任意的节点集合。比如,我们可以重写上面的循环,如下:

1
2

d3.selectAll('p').style('color','blue'); # 有点类似jquery的$('p')

当然,我们也可以根据需要操作单个节点:

1
2

d3.select('body').style('background-color','black');

选择器依据W3C选择器API定义,并被现代浏览器很好的支持。

D3提供了许多用于改变节点的方法:设置属性或样式;注册时间监听器;添加、删除或排序节点;和更改HTML或文字的内容。这些满足绝大多数需求。直接访问底层DOM也是可能的,因为每个D3选择只是一个节点数组。

动态属性

熟悉其他DOM框架(如jquery)的读者能够立即意识到与D3的相似的地方。然而,D3中的样式,属性(attributes)和其他属性(properties)可以指定为数据的函数,而不仅仅是简单的常量。尽管它们看起来简单,但是这些功能很是强大。比如这个d3-shape

下面来个例子,随机指定段落的颜色:

1
2
3
4
5

d3.selectAll('p').style('color',function(){
# H: Hue 色相(0-360) S:Saturation 饱和度(0-100) L Lightness 明度(0-100)
return "hsl(" + Math.random() * 360 + ",100%,50%)";
});

指定奇偶节点的灰色阴影的交替:

1
2
3
4

d3.selectAll('p').style('color',function(d , i){
return i % 2 ? '#fff' : '#eee';
});

计算属性通常指的是绑定数据。数据被指定是一个值数组,并且每个值都被作为第一个参数(d)传递给选择函数。使用默认的索引连接,数据数组中的第一个元素被传递给选择中的第一个节点,第二个元素被传递给第二个选择中的第二个节点,以此类推。比如,将数组数据绑定到段落元素中,就可以使用这些数据来动态计算字体的大小了:

1
2
3
4
5
6

d3.selectAll('p')
.data([8,16,20])
.style('font-size',function(d){
return d + 'px';
});

一旦数据绑定之后,我们就是可以省略数据运算符了;D3将检索先前绑定的数据。这允许我们重新计算属性而不需要重新绑定。

Enter 和 Exit

使用D3的进入和退出选择,可以为传入的数据创建新节点,并删除不需要的传出节点。当数据绑定到选择器的时候,数组数据中的每个元素都与选择中的对应节点配对。如果节点的数量少于数据,则额外的数据形成输入选择,我们可以通过追加输入选择来实例。例如:

1
2
3
4
5
6

d3.select('body')
.selectAll('p')
.data([4,8,15,16,23,42])
.enter().append('p')
.text(function(d){return "I'm number " + d + "!";})

更新节点是默认选择–数据运算符的结果。因此,如果忘记了enter和exit选择器,你将只会自动选择存在的相应数据的元素。一种常见的模式是将初始选择分为三部分:要更新的更新节点,要添加的输入节点以及要移除的现有节点。

1
2
3
4
5
6
7
8
9
10
11
12
13

// Updata...
var p = d3.select('body')
.selectAll('p')
.data([4,8,15,16,23,42])
.text(function(d) { return d; });

// Enter...
p.enter().append('p')
.text(function(d) { return d; });

// Exit...
p.exit().remove();

通过分别处理这三种情况,我们可以准确地指定在哪些节点上运行哪些操作。这可以提高性能并提供对转换的更好控制。例如,对条形图,我们可以使用旧比例初始化输入条,然后将输入条更新为新比例以及退出。

D3让我们能根据数据来转换成文档,包括创建和销毁元素。D3允许我们更改现有文档以响应用户交互,动画,和来自第三方的异步通知。

Transformation, not Representation

D3没有引入新的视图表现.与ProcessingProtovis不同,D3的图形标记词汇直接来自Web标准:HTML,SVG和CSS。例如,你可以使用D3创建SVG元素并使用外部的样式进行设置。你可以使用复合的滤镜效果,虚线描边和裁剪,如果浏览器供应商明天提出新功能,我们可以立马使用上–无需更新工具包。而且,如果我们将来决定使用D3以外的工具包,可以自身请整合。

最重要的是,D3易于浏览器的内置元素检查器进行调试:我们使用D3操作的节点恰好是浏览器本身理解的节点。

过渡

随着时间的推移,过渡逐渐应用到样式和属性中。可以通过一些令人舒服的效果,比如“弹性”,“立方体进出”和“线性效果”来控制补间。

比如,背景颜色渐变为黑色:

1
2
3

d3.select('body').transition()
.style('background-color','black');

再比如,使用延时策略来更改圆圈的大小:

1
2
3
4
5

d3.selectAll('circle').transition()
.duration(750)
.delay(function(d ,i) { return i * 10})
.attr('r',function(d) { return Math.sqrt(d * scale)})

通过只修改实际改变的属性,D3减少了开销,并允许在高帧率时具有更高的图形复杂度。D3还允许通过事件对复杂转换进行排序。而且,你仍然可以CSS3转换。

一些常用的api讲解

数组Arrays(d3-array)

统计

  • d3.min 数组中最小值
  • d3.max 数组中最大值
  • d3.extent 数组中数据的范围
  • d3.sum 数组数据的总和
  • d3.mean 数组中算数平均值
  • d3.median 数组数据的中位数
  • d3.quantile 一个排好序的数字数组的分位数
  • d3.variance 数字数组的方差
  • d3.deviation 一组数据的标准差

查找

  • d3.scan 对指定的数据执行线性扫描,根据指定的比较器返回最小元素的索引
  • d3.bisect 通过二分法获取某个数在排好序中的数组中插入的位置(同d3.bisectRight)
  • d3.bisectRight 通过二分法获取某个数在排好序的数组中的插入位置(相等的值归右边)
  • d3.bisectLeft 通过二分法获取某个数在排好序的数组中的插入位置(相等的值归左边)
  • d3.bisector 自定义一个二等分访问器或比较器
  • d3.ascending 比较两个数是否升序
  • d3.descending 比较两个数是否降序

变换

  • d3.cross 获取两个数组的笛卡尔积
  • d3.merge 合并多个数组为一个数组
  • d3.pairs 根据相临的元素合并成数组
  • d3.permute 根据数组索引重排数组
  • d3.shuffle 随机排序数组(打乱数组排列)
  • d3.ticks 从数字区间生成代表值
  • d3.tickIncrement 同上
  • d3.tickStep 同上
  • d3.range 生成一个数值的范围
  • d3.transpose 转置二位矩阵
  • d3.zip 转置可变数量的数组

…更多请参考官网介绍,这里就不一一列举了@~@

兼容性

虽然D3没有明文规定一定要在缩放矢量图形(SVG,Scalable Vector Graphics)中绘图,但是D3提供了众多的SVG图形生成器,它们都是只支持SVG的。因此,建议使用SVG画布,而SVG除了IE8之前的版本外,现代浏览器都支持。如果你要支持IE8以及IE8-的话,建议使用ECharts,其使用了canvas。

<-- 本文已结束  感谢您阅读 -->
客官,且步,赏一个呗 (@ ~ @)