D3.js D3可访问对象数据的链式转换，转换计数

我想可视化状态随时间的变化，但我不知道如何使用d3转换。简单的链式转换非常简单。但是在这种情况下，对于每个转换，我需要访问对象的数据，并且我还需要一种方法来跟踪我当前正在进行的转换的计数（因此我知道要使用哪个状态更改）

简单的暴力版本很容易做到：

如何修改代码，以便在每个矩形上运行n个转换，其中n=状态更改的数量？任何指针或d3示例都将不胜感激

var members = [
  { id: 1, state: [1, 3, 1, 2, 3] },
  { id: 2, state: [1, 2, 2, 1, 1] },
  { id: 7, state: [2, 3, 1, 2, 3] },
  { id: 112, state: [2, 2, 2, 1, 3] },
  { id: 127, state: [3, 3, 1, 2, 1] },
  [...]
  { id: 296, state: [2, 1, 1, 2, 1] }
];

var Distance = 200;

d3.select("svg").selectAll("rect")
  .data(members)
  .enter().append("rect")
    .attr("x",0)
    .attr("y",function(d,i) { return 80 + ( 500 - ((d.state[0] % 3) * 250) ) + i*25}  )
    .attr("width",10)
    .attr("height",10)
    .style("fill", "Crimson")
    .transition()
      .ease(d3.easeLinear)
      .duration(600)
      .delay(0)
      .attr("x", 60 + (1 * Distance))
      .attr("y", function(d,i) { return 80 + ( 500 - ((d.state[1] % 3) * 250) ) + i*25} )
      .transition()
        .ease(d3.easeLinear)
        .duration(600)
        .delay(0)
        .attr("x", 60 + (2 * Distance))
        .attr("y", function(d,i) { return 80 + ( 500 - ((d.state[2] % 3) * 250) ) + i*25} )
        .transition()
          .ease(d3.easeLinear)
          .duration(600)
          .delay(0)
          .attr("x", 60 + (3 * Distance))
          .attr("y", function(d,i) { return 80 + ( 500 - ((d.state[3] % 3) * 250) ) + i*25} ) ;