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起作用。如果我註釋移動＃1部分，則移動＃2工作。

觀念認爲：我用Google搜索.delay，setTimeout()和其他選項與.exit()和進一步的數據綁定步驟，但我認爲應該有更簡單的東西存在。我也嘗試過關注this SO post，但很難按照第一個答案的「常規更新模式」示例。

問題：我該如何獲得移動＃1和移動＃2繼續工作（可能進一步移動＃3，＃4等）？

Answer 1

優秀教程here

思想是通過延遲第一過渡的持續時間第二過渡。

因此，如果您有3個持續時間爲1秒的轉換，則延遲1秒，然後延遲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>