d3トランジションを使用して円を次々に表示するにはどうすればいいですか？

Question

私はサークルexample次ています：

私は以下の円を作成し、私は不透明度遷移がデータが更新を設定すると、円が次々と登場開始することを可能にしたいと。たとえば、データ長が5の場合、円1が表示され、次に円2が表示されます。最後に円5になります。長さが2になるようにデータが更新されると、円1が表示され、円2が表示されます。この効果をどうやって行うのですか？今のところ、transition（）はデータセットに対して一様に働きます。

circle.enter().append("circle") 
     .attr("class", "dot"); 

    // Update (set the dynamic properties of the elements) 
    circle 
     .attr("r", 5) 
     .attr("cy", 20) 
     .attr("cx", function(d,i){return i*50;}) 
     .attr("fill", "red"); 

    svg.selectAll("circle") 
     .style("opacity", 0) 
     .transition() 
     .duration(1000) 
     .style("opacity", 1); 

Answer 1

問題： "遷移" 選択の各要素のための遅延を設定

。

解決策：transition()後にこれを追加する必要が

：function(d, i)

手順と

使用delay() someNumberが遅れている

.delay(function(d,i){ return i * someNumber }) 

、各要素のミリ秒単位で指定します。