javascript d3.js - 散布図上の複数のポイントの移動

Question

私の目的は、ポイントのセットを取得し、シリーズのような方法でそれらを（.transition.duration()）数回動かすことです。

コードの例：

d3.csv("X.csv", function(csv) { 

    // initialize circles at random positions 
    svg.selectAll("circle") 
        .data(csv) 
        .enter() 
        .append("circle") 
         .attr("cx", function(d) { 
          return x(80*Math.random()); 
         }) 
         .attr("cy", function(d) { 
          return y(500*Math.random()); 
         }) 
         .attr("r", function(d) { 
          return r(Math.sqrt(10*Math.random())); 
         }) 
         .style("fill", function(d) { 
          return color(d.A); 
         }) 
        .style("opacity", 1.0) 
        .style("stroke-opacity", 1) 
        .style("stroke-width", 3) 
        .style("stroke", function(d) { 
         return stroke(d.B) 
        }); 

    // Move #1: moving the marks to their position 
    svg.selectAll("circle") 
     .transition().duration(2000) 
     .attr("cx",function(d) { 
      return x(+d.C); 
     }) 
     .attr("cy",function(d) { 
      return y(+d.D); 
     }) 
     .attr("r",function(d) { 
      return r(Math.sqrt(+d.E)); 
     }) 
     .style("opacity", 0.8); 

    //Move #2: move again to highlight 
    svg.selectAll("circle") 
     .transition().duration(2000) 
     .style("opacity", function(d) { 
      if (d["A"] == "male") { 
       return 0.1; 
      } else if (d["A"] == "female") { 
       return 0.8; 
      } 
     }); 
    } 

問題：をそのまま実行すると、＃1の移動がスキップされます。

失敗試行：移動＃2セクションをコメントアウトすると、移動＃1が機能します。 Move＃1セクションをコメントアウトすると、Move＃2が機能します。考え

アイデア：私は.exit()し、さらにデータバインド段階で.delay、setTimeout()、およびその他のオプションをGoogleで検索しているが、私は存在するシンプルな何かがあるはずと信じています。私もthis SO postに従ってみましたが、最初の回答の「一般的な更新パターン」の例には苦労しています。

質問： Move＃1とMove＃2を連続して動作させるにはどうすればよいですか？（さらにMoves＃3、＃4などが可能です）

Answer 1

優れたチュートリアルhere

アイデアは、最初の遷移の期間により第2遷移遅延です。

したがって、1秒間に3回のトランジションがある場合は、1回目と2回目のトランジションが完了するまで待つ必要があるため、2回目を1秒間、3回目を2秒間遅らせます。あなたはアイデアを得ることを願っています。

var canvas = d3.select('body') 
 
\t \t \t \t \t \t .append("svg") 
 
\t \t \t \t \t \t .attr("width",500) 
 
\t \t \t \t \t \t .attr("height",500); 
 
\t \t var addcircle = canvas.append("circle") 
 
\t \t \t \t \t \t \t .attr("cx",50) 
 
\t \t \t \t \t \t \t .attr("cy",50) 
 
\t \t \t \t \t \t \t .attr("r",25); \t \t 
 
\t \t 
 
\t \t var circles = d3.select('circle'); 
 
\t \t 
 
\t \t // first transition 
 
\t \t circles.transition().duration(1000) 
 
\t \t \t \t .attr("cx",250); 
 
\t \t 
 
\t \t // 2nd 
 
\t \t circles.transition().delay(1000) 
 
\t \t \t \t .duration(1000) 
 
\t \t \t \t .attr("cy",250) 
 
\t \t // 3rd 
 
\t \t circles.transition().delay(2000) 
 
\t \t \t \t .duration(1000) 
 
\t \t \t \t .attr("cx",50) 
 
\t \t // 4th 
 
\t \t circles.transition().delay(3000) 
 
\t \t \t \t .duration(1000) 
 
\t \t \t \t .attr("cy",50);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>