美文网首页
d3.js v5版本——数据选择与绑定

d3.js v5版本——数据选择与绑定

作者: 月明清风 | 来源:发表于2018-09-29 19:15 被阅读0次

1.对于d3想说的

其实d3对于svg的关系就像jquery对于原生js的关系一样。有了d3我们操作svg就会变得方便起来。毫不夸张的说,d3学至化境,一切的网页可视化都不在话下。

2.选择数据

d3中选择数据有两中方式

  • select()
  • selectAll()

故名思意,select()就是选择某一具体的dom元素,selectAll()就是选择某一类dom元素的集合

var body = d3.select("body")    //选择了body元素
var p1 = body.select("p")    // 选择了第一个p元素
var p2 = body.select("#id_name")    //选择了id为id_name的元素

var p = body.selectAll("p")    // 选择了全部的p元素

其实从上的代码也可以看出d3对与元素的选择也可以时链式的,比如选择p1:

var p1 = d3.select("body").select("p");

3.绑定数据

绑定数据也有两种方式

  • data() :将数据集绑定到选择集上,数据各项和选择集各项对应
  • datum(): 将一个数据绑定到选择集上

一般常用的是data()。datum()比较简单,就是将数据绑定到选择集的各项元素中。
这里的data()绑定就不是那么简单了。会存在几个疑问

  • 当绑定的数据集元素少于选择集元素怎么办?
  • 当绑定的数据集元素多与选择集元素怎么办?

这里就需要说到d3中另外3个更重要的概念了:Enter、Update、Exit.
下篇继续记录

相关文章

网友评论

      本文标题:d3.js v5版本——数据选择与绑定

      本文链接:https://www.haomeiwen.com/subject/hsmboftx.html