数据输入和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[0]的绘图持续5秒，并过渡到。 data[0]和具有相同的格式和所有内容。 我知道基本的过渡方式，在这种情况下，我可以在开始时输入data[0]和，然后在每个追加中添加.transition().duration(2000).attr("...").delay(5000);但是这非常复杂，如果有数据[2]，这意味着更多的代码。我怎样才能以更简单的方式做到这一点？任何人都帮助我？谢谢。

Answer 1

您可以使用一个循环来创建这些转换：

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