d3.js 中冷门却实用的内置函数总结

前言

在 d3.js 的 API 文档中，提供了许多内置函数，但其中一些非常有用的函数却常被忽视。本文旨在整理这些被遗忘却实用的函数，希望整理后它们不再被忽略。

selection.classed 与 transition.filter

selection.classed(name,【value】)

value 参数为可选。若未指定，该函数返回与 name 参数匹配的第一个非空元素是否绑定了指定的 CSS 类：true 表示已绑定，false 表示未绑定。若指定了 value 参数，则用于为 selection 添加或删除 CSS 类。

此特性与selection.attr(name,【value】)高度相似，但相对冷门。或许鲜有人不知selection.attr(name,【value】)，却有许多人并不了解selection.classed(name,【value】)  。

该函数非常实用。例如，当鼠标进入某些点时，利用它让这些点高亮以表示强调；鼠标移出后，使其恢复原来的样式。这免去了重新设置样式的麻烦，甚至在恢复原样式时往往还需要进行判断，使用此函数能简化这一过程。

transition.filter(selector)

过渡效果也可以进行过滤，这一点可能很多人都忽略了。例如，可以设置动画结束时索引为奇数的元素旋转 30 度。甚至可以自定义规则，如仅第 5、10、15 个元素发生改变，而其他元素保持不变。

d3.interpolate 插值器类型

d3.interpolate(a,b)

该函数返回一个介于 a 和 b 之间的默认插值器，插值器的类型取决于 b 的类型。

1）如果 b 是颜色类型，则返回 interpolateRgb 插值器。

2）如果是字符串类型，则返回 interpolateString 插值器。

3）如果是数组类型，则返回 interpolateArray 插值器。

4）如果是对象类型，且不能强制转换成字符串类型，则返回 interpolateObject 插值器。

5）否则，返回 interpolateNumber 插值器。

d3 数组相关 API

数组相关 API

使用 d3 时，会有大量的数组操作。如果能合理运用 d3 提供的数组相关函数，将大大提高工作效率。

d3.ascending(a,b)

如果 a 大于 b，返回 1；如果 a 等于 b，返回 0。

在可视化元素需要有序排列时，这个函数很有用，可以帮助我们完成排序。

d3.min(),d3.max(),d3.extent()

前两个函数知道的人应该不少，但最后一个相对冷门。它可以直接返回数组自然排序的最小值和最大值，省去了同时调用前面两个函数的步骤。

d3.sum(),d3.mean(),d3.median(),d3.quantile()

基本的求和、平均数、中位数、p 分位数，d3 都已实现。之前可能还需要自己编写代码，虽然不难，但代码会显得冗长难看。

d3.shuffle(array)

使用 Fisher-Yates shuffle 算法将传入的数组进行随机排序。这样在需要得到乱序结果时，实现起来是否更加高效？

d3.keys(object),d3.values(object)

keys 返回一个包含指定对象（关联数组）中所有属性名称的数组。这点很有用，例如在使用 d3.csv() 读文件时，想要滤掉一些无关的 dimension（如 id 等），使用这个函数就非常方便。

d3.map(),d3.set()

映射与集合是很常见的数据结构，但不是所有 js 版本中都有默认的实现，但 d3 提供了支持。在项目开发中遇到此类问题时，可以借用 d3 提供的 map 与 set 来解决。

d3.merge（arrays）

将指定参数 arrays 合并为一个数组。与内置的 concat 类似，不过在处理二维数组时，它会更方便。

d3.zip(arrays)，d3.pairs(arrays)

d3.zip(【1，2】，【3，4，5】) 返回【【1，3】，【2，4】】。具体用途需在实际应用中体会。

d3.pairs(【1，2，3，4】) 返回【【1，2】，【2，3】，【3，4】】。

d3.transpose(matrix)

用于转置二维矩阵。

brush、时间计数与布局函数

brush

作为一个可视化系统，怎能缺少 brush！实现 brush 的功能非常简单，构造刷子之前，需要指定 x/y 比例尺和空的范围。绘制的刷子可以重新调整大小和位置。

时间的计数

d3.time.dayOfYear(date) 返回参数 date 是一年里的第几天，1 月 1 日是第 0 天。

weekOfYear 等函数也是存在的，需要用的时候可以查阅 API，省去了编写闰年判断的麻烦。

布局

Stack(layers【,index】) 让我记忆最深，之前做一个项目时，不知道有这东西存在，愣是自己实现了一遍。不仅麻烦，而且结果是否正确还存疑。

地理

地理的 API 这块我很陌生，没有什么机会做这方面的项目，所以用的很少，后面有机会再来补充。

几何

同样陌生的还有几何这部分的内容，比如四叉树、凸包、多边形、泰森多边形。记住这部分有这些功能即可，后面用过之后再来补充。

行为

由 zoom 和 drag 两部分组成，这是很重要却很简单的内容，希望好好掌握。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。