數據輸入和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(...); 
}