D3.js 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
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 (或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
即可。
选择元素
数据类型
格式化
加载数据
数据映射
图形几何
布局
动态交互
D3 使用 语义命名。可使用d3.version获取当前版本号。
数组操作,排序,查找,汇总等。
计算基本汇总统计的一些方法。
将离散样本分成连续的无重叠的间隔。
检索数组中特定的值。
转换数组并返回一个新的数组。
人类可读的刻度轴。
便捷的数据结构,元素的键是字符串类型。
将对象转为数组的方法。
类似ES6 Map,但是键时字符类型的,并且有点其他区别。
类似ES6 Set,但是键时字符类型的,并且有点其他区别。
将数据组织成任意层次。
颜色操作和颜空间转换。
解析和格式分隔符分隔的值(特别是TSV和CSV)
命名回调函数。
使用鼠标或触屏拖曳SVG,HTML 或 Canvas。
用来平滑过渡的缓动函数。
var linear = d3.easePoly.exponent(1),
quad = d3.easePoly.exponent(2),
cubic = d3.easePoly.exponent(3);
力导向图使用velocity Verlet整合算法实现。
α
值。α
最小阈值。α
指数衰减率。α
。用来可视化层次型数据的布局算法。
插补数字,字符串,颜色,数组,对象等。
γ
矫正。将数字格式化为人类可读的形式。
序列化Canvas路径命令为SVG。
二维多边形的几何操作。
二维递归空间细分。
使用可配置的并发性评估异步任务。
生成不同分布的随机数。
XMLHttpRequest的简便封装。
映射抽象数据为可视化表示所需要的形式。
将连续的,数量的定义域映射为连续的值域上。
将连续的,数量的定义域映射为连续的,固定的颜色插值器。
d3.scaleSequential - 创建一个顺序比例尺。create a sequential scale.
sequential.interpolator - 设置比例尺的输出插值器。
d3.interpolateViridis - 暗到明的颜色组合。
d3.interpolateInferno - 暗到明的颜色组合。
d3.interpolateMagma - 暗到明的颜色组合。
d3.interpolatePlasma - 暗到明的颜色组合。
d3.interpolateWarm - 色相环颜色组合。
d3.interpolateCool - 色相环颜色组合。
d3.interpolateRainbow - 循环的色相环颜色组合。
d3.interpolateCubehelixDefault - 暗到明的色相环颜色组合。
将连续的数量的定义域映射为离散的值域。
定义域和值域都是离散的。
d3.scaleOrdinal - 创建一个序数比例尺。
ordinal - 计算对应于给定的定义域的值域。
ordinal.domain - 设置输入的定义域。
ordinal.range - 设置输出的值域。
ordinal.unknown - 设置未知输入域的输出值。
ordinal.copy - 创建比例尺的副本。
d3.scaleImplicit - 隐域的一个特殊的未知值。
d3.scaleBand - 创建序数段比例尺。
band - 计算对应于给定的定义域的值域。
band.domain - 设置输入的定义域。
band.range - 设置输出的值域。
band.rangeRound - 设置输出的值域并取整。
band.round - 取整。
band.paddingInner - 段间距。
band.paddingOuter - 外边距。
band.padding - 设置间距(段间距和外边距)。
band.align - 设置段对齐。
band.bandwidth - 获取每段宽度。
band.step - 开始相邻段之间的距离。
band.copy - 创建比例尺的副本。
d3.scalePoint - 创建序数点比例尺。
point - 计算对应于给定的定义域的值域。
point.domain - 设置输入的定义域。
point.range - 设置输出的值域。
point.rangeRound - 设置输出的值域并取整。
point.round - 取整。
point.padding - 外边距。
point.align - 设置点对齐。
point.bandwidth - 返回0。
point.step - 开始相邻点之间的距离。
point.copy - 创建比例尺的副本。
d3.schemeCategory10 - 10种分类颜色。
d3.schemeCategory20 - 20种分类颜色。
d3.schemeCategory20b - 20种分类颜色。
d3.schemeCategory20c - 20种分类颜色。
通过选择元素和加入数据来转换DOM。
可视化的图形原语。
圆形或环形扇区,如饼图或甜甜圈图。
计算用于展示饼图或甜环形图的必要的角度值。
用于绘制线图的样条曲线或者折线。
由顶线基线构成,用于面积图。
通过在点间插值生成一条曲线。
d3.curveBasis - 立方基本样条,终点循环。
d3.curveBasisClosed - 闭合立方基本样条。
d3.curveBasisOpen - 开放立方基本样条。
d3.curveBundle - 直立方基本样条。
d3.curveCardinal - 三次C样条。
d3.curveCardinalClosed - 闭合三次C样条。
d3.curveCardinalOpen - 开放三次C样条。
cardinal.tension - 设置基数样条曲线的张力。
d3.curveCatmullRom - 立方Catmull-Rom样条。
d3.curveCatmullRomClosed - 闭合立方Catmull-Rom样条。
d3.curveCatmullRomOpen - 开放立方Catmull-Rom样条。
catmullRom.alpha - 设置Catmull–Rom的alpha参数。
d3.curveLinear - 折线。
d3.curveLinearClosed - 闭合折线。
d3.curveMonotoneX - 立方样条。假设y是单调的,保持x的单调性。
d3.curveMonotoneY - 立方样条。假设x是单调的,保持y的单调性。
d3.curveNatural - 自然三次样条。
d3.curveStep - 分段常值函数。
d3.curveStepAfter - 分段常值函数。
d3.curveStepBefore - 分段常值函数。
curve.areaStart - 开始一个面积片段。
curve.areaEnd - 结束一个面积片段。
curve.lineStart - 开始一条新的线段。
curve.lineEnd - 结束一条新的线段。
curve.point - 给当前线段加一个点。
一些内置形状,用于散点图。
将形状堆叠起来,就像分段条形图那样。
解析和格式化时间。
时间计算。
管理成千上万的并发动画的队列。
selections的动画过渡。
为给定的点集计算冯罗诺图。
使用鼠标或触摸平移和缩放SVG, HTML 或 Canvas。