可以input()select追加/插入后重用吗?

我有一个场景,我想要使用数据连接为每个数据元素附加2个新的元素。

我原本是这样做的:

var y = d3.selectAll("line") .data([123, 456]); y.enter().append("line"); // assume attr and style set y.enter().append("line"); y.transition()... 

在我思考之前,我期待在我的转换中使用的更新select将包含来自输​​入select的合并附加。 但是,这当然不起作用,因为每个数据元素的select只有一个插槽。

所以我改变了代码,使它仍然使用两次相同的enter()select,但是为了进行转换而重新select新的元素。

这种方法奏效,但我的问题是这是否是一个推荐的方式去做事情。 在追加/插入后,我是否应该确保停止使用enter()? 或者可以使用它来创build多个元素,只要我记得更新select将只包含最后创build的元素?

如果事实certificate这是错误的,有什么更好的方法来实现呢?

不可以。数据连接的目的是使元素与数据同步 ,根据需要创build,删除或更新元素。 如果创build元素两次,元素将不再与绑定的数据数组一一对应。

如果您希望两个元素对应于每个数据,则首先附加一个组(G)元素以build立从数据到元素的一对一映射。 然后根据需要附加子元素 。 由此产生的结构是这样的:

 <g> <line class="line1"></line> <line class="line2"></line> </g> <g> <line class="line1"></line> <line class="line2"></line> </g> 

例如:

 var g = svg.selectAll("g") .data([123, 456]); var gEnter = g.enter().append("g"); gEnter.append("line").attr("class", "line1"); gEnter.append("line").attr("class", "line2");