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]和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(...);
}

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

1 个答案: