d3.js - 追加/插入后可以重复使用 Enter() 选择吗？

Question

我有一个场景，我想使用数据联接为每个数据元素附加 2 个新元素。

我最初是在做这样的事情:

var y = d3.selectAll("line")
    .data([123, 456]);

y.enter().append("line");  // assume attr and style set
y.enter().append("line");

y.transition()...

在我仔细考虑之前，我期望在我的转换中使用的更新选择将包含来自输​​入选择的合并附加。但当然这不起作用，因为每个数据元素的选择中只有 1 个槽。

因此，我更改了代码，使其仍然使用相同的 Enter() 选择两次，但随后重新选择新元素以进行转换。

这种方法有效，但我的问题是这是否是推荐的处理方法。我应该确保在追加/插入后停止使用 Enter() 吗？或者只要我记得更新选择将只包含最后创建的元素就可以使用它来创建多个元素吗？

如果事实证明这是错误的，那么有什么更好的方法来实现这一目标？

Answer 1

没有。数据连接的目的是 synchronize elements with data ，根据需要创建、删除或更新元素。如果创建元素两次，这些元素将不再与绑定(bind)的数据数组一一对应。

如果您希望每个数据对应两个元素，则首先附加一个组 (G) 元素以建立从数据到元素的一对一映射。然后根据需要附加子元素。最终的结构如下:

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