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有一个基础的了解,并制作出一些基础图形。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181012G1ZLO200?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券