D3.js基础入门

D3.js 是一个数据可视化的 js 库，利用 svg 在网页上绘制各种矢量图。

D3.js 的 Hello World

无论学习什么语言，都肯定是从 hello world 开始的。实例：

运行结果

Hello World

D3.js 的选择元素和绑定元素

1：选择元素————在 D3.js 中，选择元素的函数有两个，这两个函数返回的就是选择集

d3.select()

d3.selectAll()

2：绑定元素————D3.js 能将数据绑定到 DOM 上。例如网页中有一个 P 元素和一个整数 5，将这两个元素绑定之后，可以利用这个数据来操作某元素。

data()：将一个数组的各项和选择集各元素绑定。

datum()：将一个数据绑定到所有选择集上。

运行结果：第 0 个元素是 One第 1 个元素是 Two第 2 个元素是 Three

运行结果：第 0 个元素是 This is a string第 1 个元素是 This is a string第 2 个元素是 This is a string

D3.js 的 Update、Enter、Exit

update 和 enter：数组[1,3,5,7,9]绑定到 3 个

上，那么数组的最后两个元素没有可以绑定的元素，这时 D3 会建立两个空的元素与数组最后的两个数据相对应，那么这部分就称为 Enter。而有元素与数据对应的部分就称为 Update。

exit：如果数组[3]绑定到 3 个

上，可以想象，最后两 2 个

元素没有可以绑定的数据，那么没有数据绑定的部分就称为 Exit。

以图来表示是这样的：

运行结果：update：1，index：0update：3，index：1update：5，index：2enter：7，index：3enter：9，index：4

D3.js 的选择、插入、删除元素

选择元素前面已经写过：select 和 selectAll插入元素：

删除元素

实例：利用 D3.js 绘制一个完整的柱状图

通过以上D3的基础知识梳理，我们可以对D3.JS有一个基础的了解，并制作出一些基础图形。