liuyutao / d3.v4-API-Translation

D3.js 4.x 中文手册

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

D3.js 4.0 API中文手册

本文档会随官方文档同步更新。

说说4.0

今天(2016-05-14)打开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的第一手资料。

4.0的新功能

颜色,插值器,比例尺

  • 颜色有透明度(rgba,hsla等)。
  • 新增Cubehelix颜色空间。
  • 新增连续型颜色比例尺:绿松石(Viridis)和周期性的彩虹(cyclical Rainbow)。
  • 新增点比例尺和段比例尺替代以前的ordinal.rangeBands和ordinal.rangePoints。
  • 新增基本样条曲线插值器(例如连续的ColorBrewer)。

形状和布局。

  • 形状支持渲染成Canvas。
  • 修复了cardinal 和 monotone样条曲线。
  • 增加了参数化的 Catmull–Rom 和natural样条曲线。
  • 新的确定,可扩展的速度Verlet力布局。
  • 新的圆形填充布局。
  • 新的可扩展的矩形树布局;改良squarified treemaps;新增binary treemaps。
  • 新增d3.stratify用于处理行列式层次型数据(以前只支持JSON)。
  • 更快,可变的,非递归的四叉树。
  • 泰森多边形暴露有用的拓扑信息。

选择器,过渡,缓动和定时器。

  • 选择器和过渡现在是不变的,提供一个简洁的界面。
  • 新增selection.raise, selection.lower 和selection.dispatch 方法。
  • 时间在后台是冻结的,避免无意识的操作。
  • 定时器可以在外部停止。
  • 过渡现在支持 CSS 变换。
  • 可使用selection.interrupt取消过渡。
  • 更简单的过渡链(d3.active,transition.delay)。
  • 为同质转换提供更好的性能(例如元素间共享插值器)。
  • 更好地执行和持续过渡状态。
  • 修复松紧带缓冲函数和弹性缓冲函数。

其他

  • 默认的轴样式。
  • 更好的刷子交互。
  • 内置的用于并行加载数据的异步队列。
  • d3.ticks API。

我的感受

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

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

  • 路径这部分的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操作方法完美结合,让我们可以充分发挥现代浏览器的功能,自由地设计正确的可视化界面。

资料

安装

最近的稳定版是 (4.0.0), 可以按照wiki里的 安装介绍 安装使用。如果你使用NPM, 可执行npm install d3命令。不然的话可以下载最新版。 发布包支持AMD, CommonJS, 和 vanilla 环境。自定义编译可以使用 Rollup 或者其他打包工具。也可以直接从d3js.org引用:

<script src="https://d3js.org/d3.v4.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。

可视化的图形原语。

圆形或环形扇区,如饼图或甜甜圈图。

计算用于展示饼图或甜环形图的必要的角度值。

用于绘制线图的样条曲线或者折线。

由顶线基线构成,用于面积图。

通过在点间插值生成一条曲线。

一些内置形状,用于散点图。

将形状堆叠起来,就像分段条形图那样。

解析和格式化时间。

时间计算。

管理成千上万的并发动画的队列。

selections的动画过渡。

为给定的点集计算冯罗诺图。

使用鼠标或触摸平移和缩放SVG, HTML 或 Canvas。

About

D3.js 4.x 中文手册