D3.js 4.x 中文手册
Switch branches/tags
Nothing to show
Clone or download
Latest commit c43adbf Jun 22, 2017
Permalink
Failed to load latest commit information.
README.md update array api Jun 22, 2017
examples.md 案例集合(974个) Feb 5, 2017

README.md

D3.js 4.x API中文手册

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

说说4.x

今天(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的源码也有相当大的调整,最明显的是分成了很多小模块单独开发。D3留给我们的想象空间还很大。好吧,为了更好地拥抱新技术!本项目将通过对D3 V4官方文档的翻译对d3.v4做个全面深入的了解。本文为保持原汁原味,会采用直译,希望成为帮助大家入门d3.v4的第一手资料。

题外话

如果大家想在官方博客发文章可以参考:http://blockbuilder.org/

如果想检索4.x的案例可以参考:http://blockbuilder.org/search#d3version=v4

4.x的新功能

颜色,插值器,比例尺

  • 颜色支持透明度(rgba,hsla等)。
  • 新增Cubehelix颜色空间。
  • 新增连续型颜色比例尺:绿松石(Viridis)和周期性的彩虹(cyclical Rainbow)。
  • 新增点比例尺和段比例尺替代以前的ordinal.rangeBands和ordinal.rangePoints。
  • 新增基本样条曲线插值器(例如连续的ColorBrewer)。
  • 新增d3.interpolateDate
  • d3.interpolate支持特殊的日期
  • d3.interpolate支持类似数字的对象

形状和布局。

  • 形状支持渲染成Canvas。
  • 增加了参数化的 Catmull–Rom 和natural样条曲线。
  • 新的确定,可扩展的速度Verlet力布局。
  • 新的圆形填充布局。
  • 新的可扩展的矩形树布局;改良squarified treemaps;新增binary treemaps。
  • 新增d3.stratify用于处理行列式层次型数据(以前只支持JSON)。
  • 新增diagram.find支持Voronoi快速检索
  • 添加node.count
  • 包含d3-chord
  • 默认的轴样式。

  • 更快,可变的,非递归的四叉树。
  • 泰森多边形暴露有用的拓扑信息。
  • 使圆形弧线更健壮

  • 修复了cardinal 和 monotone样条曲线。
  • 修复d3.curveCatmullRom中的bug
  • 修复当范围的最小值是非0值时voronoi.size的异常。
  • 修复在voronoi diagram.find时发生崩溃
  • 修复在voronoi diagram.triangles时发生崩溃
  • 修复treemaps中有0值时挂起
  • 修复d3.pack和d3.packSiblings的重叠点bug
  • 修复force.initialize支持孤立点

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

  • 新增selection.raise, selection.lower 和selection.dispatch 方法。
  • 时间在后台是冻结的,避免无意识的操作。
  • 定时器可以在外部停止。
  • 过渡现在支持 CSS 变换。
  • 可使用selection.interrupt取消过渡。

  • 更简单的过渡链(d3.active,transition.delay)。
  • 为同质转换提供更好的性能(例如元素间共享插值器)。
  • 更好地执行和持续过渡状态。

  • 修复松紧带缓冲函数和弹性缓冲函数。
  • 修复链式过渡不会打断它之前的过渡。
  • 修复最后一个节拍抛出错误时过渡不会卡住
  • 修复抛出错误时过渡不会内存泄漏
  • 修复当序数轴过渡被打断时的无效转换

地理

  • 添加projection.fitExtent和projection.fitSize
  • 添加d3.geoIdentity用于缩放,平移和剪切平面几何。
  • 添加d3.geoGraticule10用于生成默认为10°的经纬网
  • 添加d3.geoPath的优化参数用于支持投影和context。
  • 为d3.geoIdentity添加identity.reflectX和identity.reflectY函数
  • 添加path.measure
  • 添加d3.geoContains
  • d3.geoIdentity的clipExtent替代d3.geoClipExtent
  • 导出原始地理投影。

  • 优化地图投影的默认值
  • 优化d3.geoPath
  • 提高d3.path的性能
  • 优化d3.geoCentroid

  • 修复d3.geoBounds时发生崩溃
  • 修复d3.geoStereographic反转函数
  • 修复d3.geoAlbersUsa缓存失效
  • 修复调用collide.radius没有反应。
  • 修复d3.geoConicConformal反转函数
  • 修复d3.geoConicEqualArea
  • 修复d3.geoPath的默认投影和上下文为null而不是undefined
  • 修复d3.geoBounds计算线几何体的bug
  • 修复d3.geoCentroid计算细节地理特征的bug

数据

  • 添加d3.ticks。
  • 添加d3.cross
  • d3.pairs添加一个reducer入参
  • 本地数字格式现在可以定义数字系统(如阿拉伯)
  • 内置的用于并行加载数据的异步队列。

  • 修复颜色规范中对不寻常的数字格式的解析
  • 修复interval.every(…).range入参是无效日期时挂起。
  • 修复负无穷的数字格式化
  • 修复d3.interpolateRgb.gamma的透明度插值
  • time.ticks的step参数改为interval.every。
  • 如果d3.request回调是无效的时候抛出一个异常。
  • 修复d3.queue的await回调函数中吃掉异常

交互

  • 更好的刷子交互。
  • 添加zoom.interpolate来控制聚焦过渡行为
  • 可禁用双击聚焦过渡

  • 修复变焦同时应用到一个元素和其祖先时发生崩溃。
  • 修复在brush.move中清除brush时发生崩溃
  • 修复zoom.translateExtent小于zoom.extent时挂起
  • 修复多点触摸触发的聚焦行为挂起

我的感受

  • 2016-5-20日下午五点左右,D3的star数超过50000次,位列所有前端库第二(仅次于boostrap)。自从2013年关注D3以来,几乎都超过每个月1000的增幅上涨着。严谨的可视化理论、便捷的数据驱动方法和丰富友好的文档案例让社区日渐繁荣。

  • 翻译D3 V4的API发现与D3 V3的差别很大。暴露了更丰富的功能细节,就力导向图就从原来的12个功能函数增加到现在的41个(包含二级函数)。V4的大量API由原来的二级函数升级为一级函数(实际上就是把两级的单词合并,使用驼峰命名法重命名了),这样给使用者带来了一些记忆负担,其实以前的API设计得更好用点~

加群讨论

新手群 专业群 研究群
说明 免费(暂时) 付费 免费(新手别加)
群名 D3.js D3数据可视化 大数据可视化
群号 437278817 205076374 436442115
二维码 D3.js D3数据可视化 大数据可视化

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


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

D3 (或D3.js) 是一个用来使用Web标准做数据可视化的JavaScript函数库。

D3帮助我们可以融合SVG, Canvas 和 HTML操作技术让数据变得生动有趣。

D3将强大的可视化动态交互数据驱动的DOM操作方法完美结合,让我们可以充分发挥现代浏览器的功能,自由地设计正确的可视化界面。

资料

安装

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

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

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

API 总览

选择元素

数据类型

格式化

加载数据

数据映射

图形几何

布局

动态交互

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

数组

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

统计

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

直方图

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

查找

检索数组中特定的值。

转换

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

人类可读的刻度轴。

集合

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

对象

将对象转为数组的方法。

  • 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 - 监听当前动作的拖曳事件。

缓动

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

  • ease - 缓动给定的标准化时间。
  • d3.easeLinear - 线性缓动,就是个恒等函数。

linear

* [d3.easePolyIn](https://github.com/d3/d3-ease#easePolyIn) - 多项式缓动,加速到指定的速率。

polyIn

* [d3.easePolyOut](https://github.com/d3/d3-ease#easePolyOut) - 逆多项式缓动,等价于1 - polyIn(1 - t)。

polyOut

* [d3.easePolyInOut](https://github.com/d3/d3-ease#easePolyInOut) - 对称多项式缓动。

polyInOut

* [*poly*.exponent](https://github.com/d3/d3-ease#poly_exponent) - 指定缓动多项式的指数。 ```js var linear = d3.easePoly.exponent(1), quad = d3.easePoly.exponent(2), cubic = d3.easePoly.exponent(3); ``` * [d3.easeQuad](https://github.com/d3/d3-ease#easeQuad) - easeQuadInOut的别名。 * [d3.easeQuadInOut](https://github.com/d3/d3-ease#easeQuadInOut) - 对称平方缓动。

quadInOut

* [d3.easeQuadIn](https://github.com/d3/d3-ease#easeQuadIn) - 平方缓动。

quadIn

* [d3.easeQuadOut](https://github.com/d3/d3-ease#easeQuadOut) - 逆平方缓动。

quadOut

* [d3.easeCubic](https://github.com/d3/d3-ease#easeCubic) - easeCubicInOut的别名。 * [d3.easeCubicInOut](https://github.com/d3/d3-ease#easeCubicInOut) - 对称立方缓动。

cubicInOut

* [d3.easeCubicIn](https://github.com/d3/d3-ease#easeCubicIn) - 立方缓动。

cubicIn

* [d3.easeCubicOut](https://github.com/d3/d3-ease#easeCubicOut) - 逆立方缓动。

cubicOut

* [d3.easeSinIn](https://github.com/d3/d3-ease#easeSinIn) - 正弦缓动。

sinIn

* [d3.easeSinOut](https://github.com/d3/d3-ease#easeSinOut) - 逆正弦缓动。

sinOut

* [d3.easeSin](https://github.com/d3/d3-ease#easeSin) - easeSinInOut的别名。 * [d3.easeSinInOut](https://github.com/d3/d3-ease#easeSinInOut) - 对称正弦缓动。

sinInOut

* [d3.easeExpIn](https://github.com/d3/d3-ease#easeExpIn) - 指数缓动。

expIn

* [d3.easeExpOut](https://github.com/d3/d3-ease#easeExpOut) - 逆指数缓动。

expOut

* [d3.easeExp](https://github.com/d3/d3-ease#easeExp) - easeExpInOut的别名。 * [d3.easeExpInOut](https://github.com/d3/d3-ease#easeExpInOut) - 对称指数缓动。

expInOut

* [d3.easeCircleIn](https://github.com/d3/d3-ease#easeCircleIn) - 圆形缓动。

circleIn

* [d3.easeCircleOut](https://github.com/d3/d3-ease#easeCircleOut) - 逆圆形缓动。

circleOut

* [d3.easeCircle](https://github.com/d3/d3-ease#easeCircle) - easeCircleInOut的别名。 * [d3.easeCircleInOut](https://github.com/d3/d3-ease#easeCircleInOut) - 对称圆形缓动。

circleInOut

* [d3.easeElasticIn](https://github.com/d3/d3-ease#easeElasticIn) - 弹性缓动,类似松紧带。

elasticIn

* [d3.easeElastic](https://github.com/d3/d3-ease#easeElastic) - easeElasticOut的别名。 * [d3.easeElasticOut](https://github.com/d3/d3-ease#easeElasticOut) - 逆弹性缓动。

elasticOut

* [d3.easeElasticInOut](https://github.com/d3/d3-ease#easeElasticInOut) - 对称弹性缓动。

elasticInOut

* [*elastic*.amplitude](https://github.com/d3/d3-ease#elastic_amplitude) - 指定弹性振幅。 * [*elastic*.period](https://github.com/d3/d3-ease#elastic_period) - 指定弹性周期。 * [d3.easeBackIn](https://github.com/d3/d3-ease#easeBackIn) - [预期缓动](https://en.wikipedia.org/wiki/12_basic_principles_of_animation#Anticipation)。

backIn

* [d3.easeBackOut](https://github.com/d3/d3-ease#easeBackOut) - 逆预期缓动。

backOut

* [d3.easeBack](https://github.com/d3/d3-ease#easeBack) - easeBackInOut的别名。 * [d3.easeBackInOut](https://github.com/d3/d3-ease#easeBackInOut) - 对称预期缓动。

backInOut

* [*back*.overshoot](https://github.com/d3/d3-ease#back_overshoot) - 指定超调量。 * [d3.easeBounceIn](https://github.com/d3/d3-ease#easeBounceIn) - 弹跳缓动,类似弹跳的小球。

bounceIn

* [d3.easeBounce](https://github.com/d3/d3-ease#easeBounce) - easeBounceOut的别名。 * [d3.easeBounceOut](https://github.com/d3/d3-ease#easeBounceOut) - 逆弹跳缓动。

bounceOut

* [d3.easeBounceInOut](https://github.com/d3/d3-ease#easeBounceInOut) - 均匀弹跳缓动。

bounceInOut

力导向图

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

层次布局

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

插值器

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

数字格式化

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

路径

序列化Canvas路径命令为SVG。

多边形

二维多边形的几何操作。

四叉树

二维递归空间细分。

队列

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

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

随机数

生成不同分布的随机数。

请求

XMLHttpRequest的简便封装。

比例尺

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

连续型比例尺

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

连续颜色比例尺

将连续的,数量的定义域映射为连续的,固定的颜色插值器。

viridis

inferno

magma

plasma

warm

cool

rainbow

cubehelix

量化比例尺

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

序数比例尺

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

category10

category20

category20b

category20c

选择器

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

选择元素

修改元素

数据绑定

事件处理

控制语句

命名空间

形状

可视化的图形原语。

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

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

线

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

面积

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

曲线

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

basis

basisClosed

basisOpen

bundle

cardinal

cardinalClosed

cardinalOpen

catmullRom

catmullRomClosed

catmullRomOpen

linear

linearClosed

monotoneX

monotoneY

natural

step

stepAfter

stepBefore

符号

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

堆叠

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

时间格式化

解析和格式化时间。

时间间隔

时间计算。

定时器

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

过渡

selections的动画过渡。

冯罗诺

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

缩放

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