d3.v4-API-Translation

D3.js 4.0 API中文翻译

好吧,说说我要做啥?

今天打开D3的项目地址https://github.com/d3/d3 ,发现描述已经变成了:

Bring data to life with SVG, Canvas and HTML

比以前多个了Canvas,也就是说D3.js的历史进入了新纪元。这是历经早期Protovis只支持SVG到后来d3.v3支持HTML操作,如今又进入了一个崭新的阶段将支持Canvas了。d3.v4的源码也有相当大的调整,最明显的是分成了很多小模块单独开发。模块化开发果然和预想的一样是要为支持Canvas做准备,这确实是一件让人热血澎湃的好事。D3留给我们的想象空间还很大。好吧,为了更好地拥抱新技术!本项目将通过对D3 V4官方文档的翻译对d3.v4做个全面深入的了解。本文为保持原汁原味,会采用直译,希望成为帮助大家入门d3.v4的第一手资料。

翻译有感

  • 2016-5-20日下午五点左右,D3的star数超过50000次,位列所有前端库第二(仅次于boostrap)。自从2013年关注D3以来,几乎都超过每个月1000的增幅上涨着。虽然距离排名第一的前端库boostrap有些差距,但D3的这种发展速度和受欢迎程度相信会继续给我带来更多的惊喜。

  • 翻译D3 V4的API发现与D3 V3的差别很大,功能也更多更完善,就力导向图就从原来的12个功能函数增加到现在的42个(包含二级函数),这势必会给我们做数据可视化带来更多的便利。

  • 路径这部分的API主要用来将Canvas命令转换为SVG路径的d属性的值。本质上最后还是用SVG画图。这一点可能跟我们想要的直接用Canvas画大数据量数据的需求不一样,看来以后还是得手动来实现了,这一点略微还是有些失望的~

  • D3 V4的大量API由原来的二级函数升级为一级函数(实际上就是把两级的单词合并,使用驼峰命名法重命名了),这样给使用者带来了一些记忆负担,其实以前的API设计得更好用点~


下面是译文,欢迎一起翻译,探讨~


D3: 数据驱动文档(Data-Driven Documents)

D3 (或D3.js) 是一个用来使用Web标准做数据可视化的JavaScript库。D3帮助我们使用SVG, Canvas 和 HTML技术让数据生动有趣。D3将强大的可视化动态交互数据驱动的DOM操作方法完美结合,让我们可以充分发挥现代浏览器的功能,自由的设计正确的可视化界面。

更多参考? 见wiki。

案例见gallery作者mbostock的博客bl.ocks.

安装

现在主分支已经包含了D3 4.0预览版。4.0的API不是固定的并且发布前可能会改变。最近的稳定版 (3.5.17), 可以按照wiki里的 安装介绍 安装使用。如果你使用NPM, 可执行npm install d3@next命令。不然的话可以下载最新版。 发布包支持AMD, CommonJS, 和 vanilla 环境。自定义编译可以使用 Rollup 或者其他打包工具。也可以直接从d3js.org引用:

<script src="https://d3js.org/d3.v4.0.0-alpha.40.min.js"></script>

非压缩版移除上面的.min即可。

API 总览

选择元素

数据类型

格式化

加载数据

数据映射

图形几何

布局

动态交互

D3 使用 语义命名。可使用d3.version获取当前版本号。

数组操作,排序,查找,汇总等。

计算基本汇总统计的一些方法。

  • d3.min - 计算数组中的最小值。
  • d3.max - 计算数组中的最大值。
  • d3.extent - 计算数组的范围。
  • d3.sum - 数组中所有元素求和。
  • d3.mean - 计算数组的算术平均值。
  • d3.median - 计算数组的中位数。
  • d3.quantile - 计算一个数字数组排序后的分位数。
  • d3.variance - 数组中数字的方差。
  • d3.deviation - 数组中数字的标准差。

将离散样本分成连续的无重叠的间隔。

检索数组中特定的值。

转换数组并返回一个新的数组。

人类可读的刻度轴。

便捷的数据结构,元素的键是字符串类型。

将对象转为数组的方法。

  • d3.keys - 列举关联数组的键。
  • d3.values - 列举关联数组的值。
  • d3.entries - 列举关联数组的键值对实体。

类似ES6 Map,但是键时字符类型的,并且有点其他区别。

类似ES6 Set,但是键时字符类型的,并且有点其他区别。

将数据组织成任意层次。

颜色操作和颜空间转换。

解析和格式分隔符分隔的值(特别是TSV和CSV)

命名回调函数。

使用鼠标或触屏拖曳SVG,HTML 或 Canvas。

  • d3.drag - 创建一个拖曳行为。
  • drag - 对一个选择应用拖曳行为。
  • drag.container - 设置坐标系统。
  • drag.filter - 忽略一些初始的事件。
  • drag.subject - 设置被拖曳对象。
  • drag.x - 设置被拖曳对象的x-坐标。
  • drag.y - 设置被拖曳对象的y-坐标。
  • drag.on - 监听拖曳事件。
  • event.on - 监听当前动作的拖曳事件。

用来平滑过渡的缓动函数。

力导向图使用velocity Verlet整合算法实现。

用来可视化层次型数据的布局算法。

插补数字,字符串,颜色,数组,对象等。

将数字格式化为人类可读的形式。

序列化Canvas路径命令为SVG。

二维多边形的几何操作。

二维递归空间细分。

使用可配置的并发性评估异步任务。

  • d3.queue - 管理异步任务的并发评估。
  • queue.defer - 注册一个用来评估的任务。
  • queue.abort - 中止任何活动任务,取消任何挂起任务。
  • queue.await - 注册一个任务结束后的回调函数。
  • queue.awaitAll - 注册一个所有任务结束后的回调函数。

生成不同分布的随机数。

XMLHttpRequest的简便封装。

映射抽象数据为可视化表示所需要的形式。

将连续的,数量的定义域映射为连续的值域上。

将连续的,数量的定义域映射为连续的,固定的颜色渐变。


上面这段翻译了但是比较模糊,以后提供点小例子解释下~

将连续的数量的定义域映射为离散的值域。

定义域和值域都是离散的。

通过选择元素和加入数据来转换DOM。