可以在追加/插入后重新输入()选择吗?

时间:2012-05-29 23:56:32

标签: d3.js

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

我原本做这样的事情:

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

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

y.transition()...

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

所以我更改了代码,使得它仍然使用相同的enter()选择两次,然后重新选择新元素以进行转换。

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

如果事实证明这是错误的,那么实现这一目标的更好方法是什么?

1 个答案:

答案 0 :(得分:58)

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

如果您希望两个元素对应每个数据,则首先附加一个组(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");