Javascript D3使用for循环链接动画

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

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]

where

i>1

和

i

使用循环帮助我编写上述代码

这个问题类似于-。但是，答案并不能解决我的问题

---

有关完整代码，请访问此处-

您可以这样做：

  //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
      }
    });

}

---

工作代码。

不使用这种硬编码条件-

if（index>2）

我想我们可以使用

if（index>parentArray[1].length-1）

（假设parentArray中的所有数组长度相等）是的，这样会更好！