D3.js中data(),enter()和exit()的问题详解_javascript技巧
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了D3.js中data(),enter()和exit()的问题详解_javascript技巧,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3645字,纯文字阅读大概需要6分钟。
内容图文
D3的应用非常广泛,现在成为了主流数据可视化工具之一。大家在刚接触使用d3.js的时候,感到最吃力的地方是data(), enter(), exit()这几个操作。在我接触一段时间,有了一些了解之后,简单说说我的理解。
data()
先看一个例子:
执行代码:
这里,data()是用来绑定数据到选择的DOM元素上.这样以后,就可以针对这些数据做一些相关操作,比如设置元素宽度等。
从表面上,并不能看出什么变化。但在内部,它是在对应的DOM元素上添加了一个__data__属性,可以通过document.getElementsByTagName("p")[0].__data__看到。
enter()和exit()
这两个操作令人困惑是因为单从名字上看,很难推断出它们的作用。
在上面data()的例子中,我们的DOM元素和数据的个数是一样的。但如果不一样的话,我们该怎么办?
enter()和exit()就是用来处理这种情况的。
enter()
当DOM数量少于data的数量,或者压根一个都没有的时候,我们一般会希望让程序帮忙创建。
下面的例子,我们没有事先提供DOM元素:
仍旧执行:
与上面例子不同的是,上面的例子中我们可以继续执行.style("width", "100px")等操作。但这里我们不能了,因为我们没有选择到DOM元素,需要先创建。
enter()是用来在绑定数据之后,选择缺少的那部分DOM元素。我们可能会疑惑,既然是缺少的部分,怎么选择呢?这里就需要我们发挥一点想象力,想象我们选择了一些不存在的东西。我们可以称之为“虚拟DOM”或“占位符(placeholder)”。
enter()只是进行选择,并未实际添加所需DOM元素。因此在enter()之后一般都会配合append()来进行DOM元素的实际创建。
由此以来,我们使用 d3.select("body").selectAll("p").data([1, 2, 3]).enter().append("p") 即可根据数据自动创建所需的DOM元素。
enter的处理方法
如果没有足够的元素,那么处理方法通常是使用append()添加元素。请看下面的代码:
本例中,body中的p元素只有一个,但是数据有三个,因此enter部分包含多余的两个数据。对多余数据的处理方法就是append元素,与之对应。经过处理后,body里有三个p元素,内容分别为:
通常,从服务器读取文件后,数据是有的,但是网页中是没有元素的。这是D3一个很重要的特性,即可以选择一个空集,然后使用enter().append()的形式来插入元素。假设现在body里没有p元素,请看如下代码:
上述代码中,selectAll选择了一个空集,然后绑定了数据。由于选择集为空,那么data()返回的update部分为空。然后调用enter()和append(),使得每一个数据都有元素p与之对应。最后再更改p元素的内容。即enter部分的常见处理方法是使用append()添加元素。
exit()
与enter()相反,exit()是用来选择那些与数据相比多出来的DOM元素。
在下面例子中,我们多提供了一个DOM元素:
这回就容易理解了,因为是多出来的,那么就是实际存在的,即最后一个
。
多出来的话,我们可以接着用.remove()移除这些元素,代码如下:
exit的处理方法
有多出的元素,没有数据与之对应。对于这样的元素,通常的做法是使用remove()删除元素。假设body中有5个p元素,请看如下代码:
这段代码中,对于exit部分的处理方法是删除。删除之后,网页中将不会有多余的p元素。
参考资料
"Thinking with Joins" - by Mike Bostock
内容总结
以上是互联网集市为您收集整理的D3.js中data(),enter()和exit()的问题详解_javascript技巧全部内容,希望文章能够帮你解决D3.js中data(),enter()和exit()的问题详解_javascript技巧所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。