龙空技术网

D3.js v5+入门

码农爱code 1777

前言:

目前咱们对“d3js教学”可能比较着重,咱们都需要知道一些“d3js教学”的相关内容。那么小编同时在网上网罗了一些对于“d3js教学””的相关资讯,希望姐妹们能喜欢,小伙伴们快快来了解一下吧!

简介

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

安装

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

<script src=""></script>

压缩版:

<script src=""></script>

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

<script src=""></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+ 支持最新浏览器,比如 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";

标签: #d3js教学