Skip to content

Latest commit

 

History

History
435 lines (314 loc) · 27.3 KB

README.md

File metadata and controls

435 lines (314 loc) · 27.3 KB
Raw

GitHub stars GitHub issues GitHub forks GitHub last commit

D3: Data-Driven Documents

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


资源

文档

示例

社区

教程

安装

如果使用 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

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

d3-brush

d3-chord

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

d3-interpolate

d3-quadtree

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

d3-random

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

d3-scale

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

d3-transition

d3-zoom

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

Breaking Changes

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

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 进行同步。

版权说明

Creative Commons License

star 趋势

Stargazers over time