引入 D3 文件:
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
选择集与链式语法
使用d3.select()
或d3.selectAll()
选择元素后返回的对象,就是选择集。有人会发现,D3 能够连续不断地调用函数,形如:
d3.select().selectAll().text()
这称为链式语法,和 JQuery 的语法很像,常用 JQuery 的朋友一定会感到很亲切。
如何选择元素
在 D3 中,用于选择元素的函数有两个:d3.select()
:是选择所有指定元素的第一个d3.selectAll()
:是选择指定元素的全部
如何绑定数据到 DOM
D3 中是通过以下两个函数来绑定数据的:datum()
:绑定一个数据到选择集上data()
:绑定一个数组到选择集上,数组的各项值分别与选择集的各元素绑定
插入元素
插入元素涉及的函数有两个:append()
:在选择集末尾插入元素insert()
:在选择集前面插入元素
删除元素
删除一个元素时,对于选择的元素,使用remove()
即可。
D3 笔记一:选择元素、DOM 操作、绑定数据
最新推荐文章于 2021-09-27 10:46:05 发布