javascript - 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]，我希望绘图从data[0]持续 5 秒，然后过渡到data[1]。data[0]并data[1]具有相同的格式和一切。我知道基本的过渡方式，在这种情况下，我可以在开始时输入data[0]and data[1]，然后在每个追加中添加.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(...);
}