Question

我有一个包含以下元素的数组：

var parentArray = [ [[1, 0.5], [2, 0.9], [3, 0.6]], [[1, 0.2], [2, 0.7], [3, 0.4]], [[1, 0.1], [2, 0.5], [3, 0.7]], [[1, 0.6], [2, 0.9], [3, 0.3]], [[1, 0.3], [2, 0.7], [3, 0.6]]];

要使用d3.js创建链式动画，我编写了以下代码：

var gg = main.append("svg:g");
        gg.selectAll("scatter-dots")
            .data(parentArray)
            .enter().append("svg:circle")
                .attr("cx", function (d,i) { return x(d[0][1]); } )
                .attr("cy", function (d,i) { return y(i); } )
                .attr("r", 8)
                .transition()
                .duration(2000)
                .attr("cx", function (d,i) { return x(d[1][1]); } )
                .transition()
                .duration(2000)
                .attr("cx", function (d,i) { return x(d[2][1]); } );

我对值d[0][1]，d[1][1]，d[2][1]进行了硬编码，而不是使用循环。请使用d[i][1] i > 1和i < parentArray.length，使用循环来帮助我编写上述代码。

此问题类似于 - D3 Chaining Animations with a for loop。但是，答案并没有解决我的问题。

有关完整代码，请访问此处 - http://jsfiddle.net/JR6K9/101/

Answer 1

你可以这样做：

  //make a global variable
var index = 0;
doTransition();//call transition on all circles

function doTransition() {
  d3.selectAll("circle").transition()
    .duration(2000)
    .attr("cx", function(d, i) {
      return x(d[index][1]);
    }).each("end", function(d, i) {
      if (i == parentArray.length -1) {//when last circle transition is completed
        index++;//increment index
        if (index > 2)//the data array has length of 2
          return;
        doTransition();//do the transition
      }
    });

}

工作代码here。

D3链接动画使用for循环

1 个答案: