D3: Data-Driven Documents

D3 (或者叫 D3.js )是一个基于 web 标准的 JavaScript 可视化库。 D3 可以借助 SVG, Canvas 以及 HTML 将你的数据生动的展现出来。 D3 结合了强大的可视化交互技术以及数据驱动 DOM 的技术，让你可以借助于现代浏览器的强大功能自由的对数据进行可视化。

资源

• 最新发行版

文档

• API 文档 ( 中文版 )
• API 文档 ( 英文版 )
• d3-queue(v5.x.x中被移除)
• d3-request(v5.x.x中被移除)
• v3 与 v4

示例

• 官方画廊
• 搜索示例
• Mike Bostock 的示例

社区

• d3.js on Stack Overflow
• d3.js Google Group
• 插件
• 图说数据
• GraphVis

教程

• 教程
• 基于 d3js 的图论
• 理解数据绑定
• 数据绑定示例
• D3 in Depth

安装

如果使用 npm，则可以通过 npm install d3 来安装。 此外还可以下载 最新版， 最新版支持 AMD、CommonJS 以及基础标签引入形式。 你也可以直接从 d3js.org， CDNJS, 或者 unpkg 加载. 比如：

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

压缩版：

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

你也可以单独使用 d3 中的某个模块， 比如单独使用 d3-selection：

<script src="https://d3js.org/d3-selection.v1.js"></script>

D3基于 ES2015 modules 开发。 可以使用 Rollup， webpack 或者其他你偏爱的打包工具进行构建。 在一个符合 ES2015 的应用中导入 d3 或者 d3 的某些模块：

import { scaleLinear } from "d3-scale";

或者导入 d3 的全部功能并且设置命名空间 (这里是 d3)：

import * as d3 from "d3";

在 Nodejs 环境中：

var d3 = require("d3");

你也可以导入多个模块然后将这些模块集合到 d3 对象中， 此时使用 Object.assign：

var d3 = Object.assign({}, require("d3-format"), require("d3-geo"), require("d3-geo-projection"));

支持环境

D3 5.0 支持最新浏览器，比如 Chrome，Edge，Firefox 以及 Safari。D3 v4 以及之前的版本支持 IE 9 以上的版本。D3 的一部分功能能在旧版的浏览器中运行，因为 D3 的核心功能对浏览器的要求比较低。例如 d3-selection 使用 Level 1 级 Selectors API，但是可以通过预先加载 Sizzle 来实现兼容。现代浏览器对 SVG 和 CSS3 Transition 的支持比较好。所以 D3 不支持更低级别的浏览器，如果你的浏览器不支持这些标准，那么对不起了，大兄弟。

D3 也可以运行在 Node 和 Web workers 中. 在 Node 环境中使用 DOM 的时候，必须要提供自己的 DOM 实现。推荐使用 JSDOM，为了避免定义全局 document，建议将 DOM 传递给 d3.select 或者将 NodeList 传递给 d3.selectAll，如下：

var d3 = require("d3"),
    jsdom = require("jsdom");
var document = jsdom.jsdom(),
    svg = d3.select(document.body).append("svg");

在支持 ES 模块化 的环境中，你可以将 d3 作为一个命名空间来导入 D3 的全部功能：

import * as d3 from "d3";

如果你不想导入全部模块，则分配命名空间的时候要和 d3 进行区分：

import * as d3 from "d3";
import * as d3GeoProjection from "d3-geo-projection";

出于这个原因，应该优先考虑 D3 模块中的原有变量名，可以按需导入：

import {select, selectAll} from "d3-selection";
import {geoPath} from "d3-geo";
import {geoPatterson} from "d3-geo-projection";

如果你使用打包工具，则确保已经配置好正确的入口，可以参考 resolve.mainFields

Changes in D3 6.0

2020.08.26发布

这个文档只包含主要更新。 次要更新以及修订请参阅 发布记录.

D3 现在 采用原生集合 (Map 和 Set) 并且 接受迭代。d3.group 和 d3.rollup 是强大的用来替代 d3.nest 的聚合函数，并且能与 d3-hierarchy 以及 d3-selection 很好的结合。在 d3-array 中也新增了很多辅助工具，比如 d3.greatest，d3.quickselect，以及 d3.fsum.

D3 现在 直接将事件传递给监听器，替代了全局 d3.event 并将 D3 与普通 JavaScript 和大多数其他框架内联。

d3-delaunay (基于 Vladimir Agafonkin 的 Delaunator) 替代了 d3-voronoi, 获得了极大的性能提升，鲁棒性以及 搜索。新的 d3-geo-voronoi 可以用于球面地理数据计算! d3-random 进行了 极大的扩展 并且包含了快速 线性同余生成器 用于随机性。 d3-chord 包含了新的布局以用于 有向 和转置弦图。 d3-scale 新增了径向缩放 类型。

… 以及其他各种小的改进。 超过 450 个例子 已经升级到 D3 6.0!

d3-array

• 接受迭代.
• 新增 d3.group.
• 新增 d3.groups.
• 新增 d3.index.
• 新增 d3.indexes.
• 新增 d3.rollup.
• 新增 d3.rollups.
• 新增 d3.maxIndex.
• 新增 d3.minIndex.
• 新增 d3.greatest.
• 新增 d3.greatestIndex.
• 新增 d3.least.
• 新增 d3.leastIndex.
• 新增 d3.bin.
• 新增 d3.count.
• 新增 d3.cumsum.
• 新增 d3.fsum.
• 新增 d3.Adder.
• 新增 d3.quantileSorted.
• 新增 d3.quickselect.
• 新增 bisector.center.
• d3.cross 允许两个以上的迭代.
• d3.quantile 接受未排序的输入.
• 修复了 array.sort 在 Safari 上的缺陷.
• 修复了直方图分箱阈值忽略 NaN 输入的缺陷.
• 修复了 d3.ticks 不返回域外的刻度的缺陷.
• 提高 d3.median 的性能.

参考 https://observablehq.com/@d3/d3-array-2-0 获取更多详情.

d3-brush

• 新增 event.mode.
• brush.on 直接传递 event 给监听器.
• 改进多点触控交互.

d3-chord

• 新增 d3.chordDirected.
• 新增 d3.chordTranspose.
• 新增 d3.ribbonArrow.
• 新增 ribbon.padAngle.
• 新增 ribbon.sourceRadius.
• 新增 ribbon.targetRadius.

d3-delaunay

• 新增 d3.Delaunay.

d3-drag

• drag.on 直接传递 event 给监听器.

d3-force

• simulation.tick 新增 iterations 参数.
• 新增 forceCenter.strength.
• 新增 forceSimulation.randomSource.
• 所有内置的力模型现在都是完全确定的 (包括“抖动的”重合节点).
• 通过半径的偏移来改进默认的 phyllotaxis 布局.
• 改进边引用未知节点时的错误消息.
• force.initialize 被改为传递一个随机的源.
• 修复初始化位置固定的节点的缺陷.

d3-format

• 将默认的负号改为负号 (−) 而不是连字减号 (-).
• 修正大于或等于 1e21 的数字的十进制格式 d.

d3-geo

• 修复一些退化多边形的裁剪.

d3-hierarchy

• 接受迭代.
• 新增 node[Symbol.iterator]; 层次结构现在是可迭代的.
• 新增 node.find.
• node.each 修改为传递遍历的索引.
• node.eachAfter 修改为传递遍历的索引.
• node.eachBefore 修改为传递遍历的索引.
• 修复 d3.packSiblings.
• 修复 d3.treemapBinary 被零除的缺陷.
• 修复 d3.treemapResquarify 被零除的缺陷.

d3-interpolate

• 新增 interpolateZoom.rho. (#25)
• 允许 d3.piecewise 默认使用 d3.interpolate. #90
• d3.interpolateTransformCss 被修改为使用 DOMMatrix 并需要绝对单位. #83

d3-quadtree

• 修正了坐标偏离到巨大值时的无限循环.

d3-random

• 新增 d3.randomLcg.
• 新增 d3.randomGamma.
• 新增 d3.randomBeta.
• 新增 d3.randomWeibull.
• 新增 d3.randomCauchy.
• 新增 d3.randomLogistic.
• 新增 d3.randomPoisson.
• 新增 d3.randomInt.
• 新增 d3.randomBinomial.
• 新增 d3.randomGeometric.
• 新增 d3.randomPareto.
• 新增 d3.randomBernoulli.
• 允许 d3.randomBates 取小数 n.
• 允许 d3.randomIrwinHall 取小数 n.
• 默认的源中不再包含 Math.random.

感谢 @Lange, @p-v-d-Veeken, @svanschooten, @Parcly-Taxel 和 @jrus 的贡献s!

d3-scale

• 接受迭代.
• 新增 diverging.rangeRound.
• 新增 sequential.range (为了与 d3-axis 兼容).
• 新增 sequential.rangeRound.
• 新增 sequentialQuantile.quantiles.
• 新增 d3.scaleRadial.
• diverging.range 现在可以用来设置插值.
• sequential.range 现在可以用来设置插值.
• d3.scaleDiverging 现在可以接受一个范围数组代替一个插值器.
• d3.scaleSequential 现在可以接受一个范围数组代替一个插值器.
• 修复了 continuous.nice.
• 修复了 log.ticks.
• 修复了 log.ticks. #44
• 修复了 scale.clamp 在 sequential quantile scales 的问题. 多谢, @Fil!
• 修复了 scale.clamp 用于域值大于范围值的连续缩放.
• 修复了 diverging scales 在降序时的问题.
• 从 time.ticks 和 time.nice 中移除 step 参数.

d3-selection

• 新增 selection.selectChild.
• 新增 selection.selectChildren.
• 新增 d3.pointer.
• 新增 d3.pointers.
• 新增 selection[Symbol.iterator]; selections are now iterable!
• selection.data 接受迭代.
• d3.selectAll 接受迭代.
• selection.on 被修改为直接传递 event 给监听器.
• 从 selection.on 监听器中移除索引和组!
• 移除 d3.event!
• 移除 d3.mouse.
• 移除 d3.touch.
• 移除 d3.touches.
• 移除 d3.customEvent.
• 移除 d3.clientPoint.
• 移除 d3.sourceEvent.
• 修复了 selection.merge(transition) 报错问题.

所有的修改请参考 https://observablehq.com/@d3/d3-selection-2-0.

d3-shape

• 接受迭代.
• 新增 d3.line(x, y) 速写.
• 新增 d3.area(x, y0, y1) 速写.
• 新增 d3.symbol(type, size) 速写.

d3-time-format

• 新增 ISO 8601 “week year” (%G and %g).

d3-timer

• 修复了 interval.restart 作为间隔重新启动的问题.

d3-transition

• 新增 transition.easeVarying.
• 新增 transition[Symbol.iterator]; transitions are now iterable.
• 修复了 selection.transition 未找到时的错误.
• 修复了 transition.end 选择集为空时候的解析问题.

d3-zoom

• 新增 zoom.tapDistance.
• zoom.on 直接传递 event 给监听器.
• 修改默认的 zoom.filter 如果按下控制键，过滤器观察 wheel 事件.
• 修改默认的 zoom.wheelDelta 如果按下控制键，缩放更快.
• 不要设置触控动作:无.
• 升级到 d3-selection 2.

Breaking Changes

D3 6.0 包含了一些非向后兼容的改变.

• 移除了 d3.event.
• 修改 selection.on 直接将 event 传递给监听器.
• 修改 transition.on 直接将 event 传递给监听器.
• 修改 brush.on 直接将 event 传递给监听器.
• 修改 drag.on 直接将 event 传递给监听器.
• 修改 zoom.on 直接将 event 传递给监听器.
• 移除了 d3.mouse; 使用 d3.pointer.
• 移除了 d3.touch; 使用 d3.pointer.
• 移除了 d3.touches; 使用 d3.pointers.
• 移除了 d3.clientPoint; 使用 d3.pointer.
• 移除了 d3.voronoi; 使用 d3.Delaunay.
• 移除了 d3.nest; 使用 d3.group and d3.rollup.
• 移除了 d3.map; 使用 Map.
• 移除了 d3.set; 使用 Set.
• 移除了 d3.keys; 使用 Object.keys.
• 移除了 d3.values; 使用 Object.values.
• 移除了 d3.entries; 使用 Object.entries.
• 重命名 d3.histogram 为 d3.bin.
• 重命名 d3.scan 为 d3.leastIndex.
• 修改 d3.interpolateTransformCss, 需要绝对单位.
• 修改 d3.format 负数, 默认设置为减号而不是连字符减号.

D3 现在需要运行在支持 ES2015 的浏览器上. 对于不支持的浏览器，你需要自己做转义.

最后, 对 Bower 的支持被取消了; D3 现在只在 npm 和 GitHub 上发布.

参考我们的 升级指南 获取升级帮助.

5.x.x 大版本改动

D3 5.0 引入了很少的非向后兼容的改变。

D3 5.0 现在采用的是 Promises 来替代异步回调加载数据。 Promises 简化了异步代码结构，尤其是现代浏览器支持 async 和 await 操作。(在 Observable 中参考 promises 介绍)。例如在 V4 中使用如下方式加载 CSV 文件：

d3.csv("file.csv", function(error, data) {
  if (error) throw error;
  console.log(data);
});

在 V5 中基于 Promises 实现：

d3.csv("file.csv").then(function(data) {
  console.log(data);
});

要注意的是不需要重新抛出错误，因为 Promise 会自动 reject，并且需要的话可以使用 promise.catch。使用 await 的话代码会更简单：

const data = await d3.csv("file.csv");
console.log(data);

由于采用了 promises，D3 5.0 使用 Fetch API 来代替 XMLHttpRequest：d3-request 模块由 d3-fetch 替代。Fetch 支持许多强大的特性，比如 响应流。D3 5.0 也不再使用 d3-queue，取而代之推荐 Promise.all 来处理批量异步任务，或者使用辅助库比如 p-queue 来 控制并发。

D3 5.0 不再提供 d3.schemeCategory20* 颜色方案。因为这些颜色有缺陷，可能会错误的暗示数据中的关系：色调相近的可能被认为是一个分组，而亮度可能被错认为是排序。作为替换，D3 5.0 使用 d3-scale-chromatic，它实现了 ColorBrewer 的方案设计，包括 categorical， diverging，sequential single-hue 和 sequential multi-hue 方案。这些颜色方案在连续式和分散式都是可用的。

D3 5.0 提供了通过 d3-contour 实现的 marching squares(生成二维轮廓的算法) 和 density estimation(密度估计). 并且添加了两个新的 d3-selection 方法：selection.clone 用来克隆已选择的节点，d3.create 用来创建分离的元素。 Geographic projections 也支持 projection.angle，一种由 Philippe Rivière 提出的梦幻般的新的多面体投影。

最后，D3 5.0 的 package.json 不再引用依赖的精确版本，解决了重复安装 D3 模块的问题。

本地开发

由于浏览器的安全策略，不能直接读取本地文件。在本地开发的时候，必须要运行一个服务器环境而不是使用 file://, 推荐使用 Nodejs 的http-server，安装方法:

npm install -g http-server

运行:

http-server &

然后会在当前目录启动一个 http://localhost:8080 的服务。

营养跟不上了快给我来瓶冰阔乐

翻译说明

每个子仓库中包含三个 .md 文件：

• README.md 文件是翻译后的中文版
• README_EN.md 文件是翻译时参照的英文版
• README_ORIGIN.md 文件是源仓库文档

更新时，首先将 README_ORIGIN.md 与官网文档进行同步，然后将 README_EN.md 和 README_ORIGIN.md 进行比对， 将 diff 更新至 README.md，同时将 README_EN.md 与 README_ORIGIN.md 进行同步。

版权说明

star 趋势