D3.js

使用 SVG、Canvas 和 HTML 将数据变为现实。「Bring data to life with SVG, Canvas and HTML.」

Github stars Tracking Chart

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"));


Overview

Name With Ownerd3/d3
Primary LanguageShell
Program languageJavaScript (Language Count: 2)
PlatformBSD, Cross-platform, Linux, Mac, Unix-like, Windows
License:ISC License
Release Count302
Last Release Namev7.9.0 (Posted on 2024-03-12 15:14:50)
First Release Namesemver (Posted on 2011-02-17 12:02:05)
Created At2010-09-27 17:22:42
Pushed At2024-04-25 14:42:03
Last Commit At
Stargazers Count107.7k
Watchers Count3.6k
Fork Count22.9k
Commits Count4.5k
Has Issues Enabled
Issues Count2193
Issue Open Count6
Pull Requests Count479
Pull Requests Open Count9
Pull Requests Close Count684
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private

D3: Data-Driven Documents

D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.

Resources

Installing

If you use npm, npm install d3. Otherwise, download the latest release. The released bundle supports anonymous AMD, CommonJS, and vanilla environments. You can load directly from d3js.org, CDNJS, or unpkg. For example:

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

For the minified version:

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

You can also use the standalone D3 microlibraries. For example, d3-selection:

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

D3 is written using ES2015 modules. Create a custom bundle using Rollup, Webpack, or your preferred bundler. To import D3 into an ES2015 application, either import specific symbols from specific D3 modules:

import {scaleLinear} from "d3-scale";

Or import everything into a namespace (here, d3):

import * as d3 from "d3";

In Node:

var d3 = require("d3");

You can also require individual modules and combine them into a d3 object using Object.assign:

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