Question

我希望可视化状态随时间的变化，我不知道如何使用d3过渡来实现。简单的链式转换非常简单。但在这种情况下，对于每次转换，我需要访问对象的数据，我还需要一种方法来跟踪我当前所处的转换计数（所以我知道要使用哪种状态更改）。

很容易做一个简单的暴力版本： http://bl.ocks.org/aschneiderman/4f7a8824c96f33aa7ad48c729b739409

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

如何修改代码以便在每个矩形上运行n个过渡，其中n =状态变化的数量？任何指针或d3示例都将非常感激。

D3链接转换，可访问对象数据，转换计数

0 个答案: