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