d3-function(d)

最新推荐文章于 2023-11-01 11:50:13 发布

墨墨leo

最新推荐文章于 2023-11-01 11:50:13 发布

阅读量2.9k

点赞数 1

本文详细解析了D3.js中数据绑定的工作原理，通过实例展示了如何使用D3.js选择DOM元素并绑定数据，帮助读者深入理解D3.js的数据驱动文档机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

应该是这本书 Interactive Data Visualization for the Web

解答我很多关于d3机理的困惑

先是06 Binding Data

代码

var dataset = [ 5, 10, 15, 20, 25 ];

d3.select("body").selectAll("p")
    .data(dataset)
    .enter()
    .append("p")
    .text("New paragraph!");

解释：

d3.select("body") — 选择DOM中body元素，然后作为参数传给链条chain(d3是链条结构)的下一步

.selectAll("p") —选择DOM中所有p元素 .因为此时DOM中没有任何p元素存在，这一步将会返回一个空的selection。将这个空的selection想象成即将存在的p（个人理解就是向内存申请p的空间，好为下一步存储传data做准备）

这个可能比较抽象，一时难以理解，可以看http://mbostock.github.io/d3/tutorial/circle.html

.data(dataset) —计算和分析数据的值。由代码可知有5个data，所以在这步之后所有的事物要执行5次，对于dataset的每个值执行一次

.enter() — enter()函数会建立一个新的有着数据绑定的元素。 enter()函数先查看DOM，然后将数据提交给DOM。然后传递给链条chain下一步

PS:如果数据的个数比对应的DOM中元素个数多，enter()函数会创建一个新的placeholder 元素来存放数据（请自行想象工作机制）。然后enter()函数吧多余数据放入placeholder元素中，然后进行链条chain的下一步。这个可能会比较困惑，有个动态图，我找不到了

.append("p") —获得 enter()函数创建的placeholder selection ，并且把p元素插入DOM中。然后传递给链条chain下一步

.text("New paragraph!") —获得上一步新创建的p元素，然后插入text值

在chrone浏览器的的console控制台中，输入console.info(d3.selectAll("p"))

得到

JS console

一步步打开

JS console

再打开

JS console

已经将data中的数据绑定到p元素上