可以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");