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>