D3:数据驱动文件
D3(或 D3.js)是一个用 Web 标准可视化数据的 JavaScript 库。D3 帮助你使用 SVG、Canvas 和 HTML 把数据带到生活中。D3 将强大的可视化和交互技术与数据驱动的 DOM 操作方法结合在一起,为您提供了现代浏览器的全部功能,以及为您的数据设计正确的可视化界面的自由。
D3 允许您将任意数据绑定到文档对象模型(DOM),然后将数据驱动的转换应用于文档。 例如,您可以使用 D3 从数组中生成HTML表。 或者,使用相同的数据创建具有平滑过渡和交互的交互式 SVG 条形图。
D3 不是一个单一的框架,旨在提供每一个可想到的功能。 相反,D3 解决了问题的关键:基于数据高效地处理文档。 这避免了专有的表示,并提供了非凡的灵活性,揭示了 HTML、SVG 和 CSS 等 Web 标准的全部功能。 以最小的开销,D3 非常快,支持大数据集和交互动画的动态行为。 D3 的函数性风格允许通过官方和社区开发的模块的各种集合来代码重用。
D3 支持的主流浏览器不包括 IE8 及以前的版本。D3 测试了 Firefox、Chrome、Safari、Opera 和 IE9。D3 的大部分组件可以在旧的浏览器运行。D3 核心库的最低运行要求:支持 JavaScript 和 W3C DOM API。对于 IE8,建议使用兼容性库 Aight 库。
安装
您可以使用 npm:
npm install d3
或者,请下载 最新发布版本。 发布的软件包支持匿名 AMD、CommonJS 和 vanilla 环境。 您可以直接从 d3js.org、CDNJS 或 unpkg 加载。 例如:
<script src="https://d3js.org/d3.v6.js"></script>
对于最小化版本:
<script src="https://d3js.org/d3.v6.min.js"></script>
你也可以使用独立的 D3 微库。例如,d3-selection:
<script src="https://d3js.org/d3-selection.v2.js"></script>
D3 使用 ES2015 modules 编写。创建一个 使用 Rollup 的自定义捆绑程序 Rollup、Webpack 或您喜欢的捆绑程序。要将 D3 导入到 ES2015 应用程序中,要么从特定的 D3 模块导入特定的符号。
import {scaleLinear} from "d3-scale";
或者将所有内容导入一个命名空间(这里是 d3):
import * as d3 from "d3";
在 Node 中
const d3 = require("d3");
你也可以 require 单个模块,并使用 Object.assign 将它们组合成一个 d3 对象:
const d3 = Object.assign({}, require("d3-format"), require("d3-geo"), require("d3-geo-projection"));