D3.js中的数据输入和多次转换

Question

我已经使用d3.js在单个svg中绘制了多个形状。 就像这样：

var draw = svg.selectAll("draw").data(data[0]).enter();
draw.append...  //Drawing first group of shapes
draw.append...  //Drawing second group of shapes

我知道这可能不是最好的方法，但是效果很好。 现在，我想向其中添加一些转换。 我也有data[1] ，我想要持续5秒钟从data[0]绘制图形，然后过渡到data[1] 。 data[0]和data[1]具有相同的格式，并且所有内容都相同。 我知道基本的过渡方式，在这种情况下，我可以在开头输入data[0]和data[1] ，然后在每个追加中添加.transition().duration(2000).attr("...").delay(5000) ; 但这很复杂，如果有data [2]，则意味着需要更多代码。 如何以更简单的方式做到这一点？ 有人帮我吗？ 谢谢。

Answer 1

您可以使用循环来创建这些过渡：

for(var i = 1; i < data.length; i++) {
  svg.selectAll("draw").data(data[i])
     .transition().duration(2000).delay(i * 5000)
     .attr(...);
}