【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板

绑定数据之后,选择集分为三部分:update、enter、exit。这三部分的处理办法是什么呢?本文将讲解其处理方法,以及一个常用的处理模板。

1. enter的处理方法

如果没有足够的元素,那么处理方法通常是使用append()添加元素。请看下面的代码:

本例中,body中的p元素只有一个,但是数据有三个,因此enter部分包含多余的两个数据。对多余数据的处理方法就是append元素,与之对应。经过处理后,body里有三个p元素,内容分别为:

通常,从服务器读取文件后,数据是有的,但是网页中是没有元素的。这是D3一个很重要的特性,即可以选择一个空集,然后使用enter().append()的形式来插入元素。假设现在body里没有p元素,请看如下代码:

上述代码中,selectAll选择了一个空集,然后绑定了数据。由于选择集为空,那么data()返回的update部分为空。然后调用enter()和append(),使得每一个数据都有元素p与之对应。最后再更改p元素的内容。

即enter部分的常见处理方法是使用append()添加元素。

2. exit的处理方法

有多出的元素,没有数据与之对应。对于这样的元素,通常的做法是使用remove()删除元素。假设body中有5个p元素,请看如下代码:

这段代码中,对于exit部分的处理方法是删除。删除之后,网页中将不会有多余的p元素。

3. 处理模板

经过上两节的内容,知道了如何处理多余的数据和元素。但是,有时候我们不知道是数据多,还是元素多,或者允许用户决定谁多谁少。对于事前不知道数组长度或元素数量的问题,可定义一套处理的模板。请看如下代码:

如此,则不需要考虑网页中是否有足够的p元素,或者有多余的p元素,无论是何种情况,最终的结果必定是一个p元素对应数组中的一个项,没有多余的。这种方法,可称为有一套处理的模板,在数据需要经常更新时很常用。

谢谢阅读。下一篇文章将会讲述如何应用该模板。

文档信息

【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板》上有5条评论

  1. 在数据相同的情况下,如何强制更新节点。。。貌似只能通过删除全部元素再添加回来的方式来进行。这样的话在数据量不是很大的时候都会卡顿(数据量<10)。。。。这个情况就是比例尺改变的时候会发生。。数据没更新但是改变比例尺,同时不希望整体缩放,而只是相对位置的改变,所以不能用通常的缩放实现,(以及viewbox)

    • 好吧,现在已经解决,之前没看清,使用了enter后的结果。。说起来作者写的很清楚了,只是我没注意到而已

  2. Pingback引用通告: 【 D3.js 选择集与数据详解 — 5 】 处理模板的应用 – 剑客|关注科技互联网

  3. 一直关注,不知道楼主有没有什么值得推荐的D3.js网站和学习资料

评论已关闭。