D3.v4 API Translation Save

D3.js 4.x 中文手册

Project README

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

缓动

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

var linear = d3.easePoly.exponent(1),
    quad = d3.easePoly.exponent(2),
    cubic = d3.easePoly.exponent(3);

力导向图

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

层次布局

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

插值器

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

数字格式化

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

路径

序列化Canvas路径命令为SVG。

多边形

二维多边形的几何操作。

四叉树

二维递归空间细分。

队列

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

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

随机数

生成不同分布的随机数。

请求

XMLHttpRequest的简便封装。

比例尺

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

连续型比例尺

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

连续颜色比例尺

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

量化比例尺

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

序数比例尺

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

选择器

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

选择元素

修改元素

数据绑定

事件处理

控制语句

命名空间

形状

可视化的图形原语。

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

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

线

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

面积

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

曲线

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

符号

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

堆叠

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

时间格式化

解析和格式化时间。

时间间隔

时间计算。

定时器

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

过渡

selections的动画过渡。

冯罗诺

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

缩放

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

Open Source Agenda is not affiliated with "D3.v4 API Translation" Project. README Source: tianxuzhang/d3.v4-API-Translation
Stars
769
Open Issues
3
Last Commit
5 years ago
Tags

Open Source Agenda Badge

Open Source Agenda Rating