d3.force模拟逐步数据

Question

我有一组数据点集合，当我逐步浏览数组条目时，这些数据点由气泡分组和重新组合表示。每一步都适当地反映了数据的变化，但前一步骤的气泡消失，新气泡飞入新的位置而不是从之前的位置过渡。我有一种感觉，我正在做一些简单而愚蠢的事情，但我对D3js来说是全新的，似乎无法让它发挥作用......

以下是我的数据的前3个步骤（为了便于阅读而大大缩短）：

data = [{"state_matrix":{"apps":null,"grade":null,"grades":
["0","1","2","3","4","5","6","7","8"],"nodes":
[{"grade_level":6,"score":0,"status":"pending","state":0,"id":1409},
{"grade_level":6,"score":0,"status":"pending","state":0,"id":1410},
{"grade_level":0,"score":0,"status":"pending","state":0,"id":1411},
{"grade_level":2,"score":0,"status":"pending","state":0,"id":1412},
{"grade_level":0,"score":0,"status":"pending","state":0,"id":1413},
{"grade_level":4,"score":0,"status":"pending","state":0,"id":1414},
{"grade_level":0,"score":0,"status":"pending","state":0,"id":1415},
{"grade_level":0,"score":0,"status":"pending","state":0,"id":1416},
{"grade_level":4,"score":0,"status":"pending","state":0,"id":1617}]}},
{"state_matrix":{"apps":null,"grade":"0","grades":
["0","1","2","3","4","5","6","7","8"],"nodes":
[{"grade_level":6,"score":0,"status":"pending","state":0,"id":1409},
{"grade_level":6,"score":0,"status":"pending","state":0,"id":1410},
{"grade_level":0,"score":0,"status":"pending","state":1,"id":1411},
{"grade_level":2,"score":2,"status":"pending","state":0,"id":1412},
{"grade_level":0,"score":0,"status":"pending","state":1,"id":1413},
{"grade_level":4,"score":2,"status":"pending","state":0,"id":1414},
{"grade_level":0,"score":0,"status":"pending","state":1,"id":1415},
{"grade_level":2,"score":2,"status":"pending","state":0,"id":1616},
{"grade_level":4,"score":2,"status":"pending","state":0,"id":1617}]}},
{"state_matrix":{"apps":null,"grade":"0","grades":
["0","1","2","3","4","5","6","7","8"],"nodes":
[{"grade_level":6,"score":0,"status":"pending","state":0,"id":1409},
{"grade_level":6,"score":0,"status":"pending","state":0,"id":1410},
{"grade_level":0,"score":0,"status":"pending","state":1,"id":1411},
{"grade_level":2,"score":2,"status":"pending","state":0,"id":1412},
{"grade_level":0,"score":0,"status":"pending","state":1,"id":1413},
{"grade_level":4,"score":2,"status":"pending","state":0,"id":1414},
{"grade_level":0,"score":0,"status":"pending","state":1,"id":1415},
{"grade_level":2,"score":2,"status":"pending","state":0,"id":1616},
{"grade_level":4,"score":2,"status":"pending","state":0,"id":1617}]}}]

我的剧本[编辑]：

<script>
  var canvas = $('#canvas');
  var width = canvas.width();
  var height = canvas.height();
  var c = d3.select('#canvas');

  var yCenter = [100,200,300,400,500,600,700,800,900,1000,1100];
  var xCenter = [100,200,300,400,500,600,700,800,900,1000,1100];
  var color = d3.schemeCategory20;
  var nodes = data[0].state_matrix.nodes;

  var simulation = d3.forceSimulation(nodes)
    .force('charge', d3.forceManyBody().strength(.1))
    .force('x', d3.forceX(function(d) {
      return xCenter[d.score];
    }))
    .force('y', d3.forceY(function(d) {
      return yCenter[d.grade_level];
    }))
    .force('collision', d3.forceCollide()
        .radius(function(d) {
          return d.score+4;
    }))
    .on('tick', ticked);

  function ticked() {
    node.attr('cx', function(d) {
        return d.x;
      })
      .attr('cy', function(d) {
        return d.y;
      });
  }


  function draw(nodes) {

    node = c.selectAll(".node")
      .data(nodes)
      .style("fill", "blue")
      .attr('r', function(d) {
        return d.score+4;
      })
      .attr('cx', function(d) {
       return d.x;
      })
      .attr('cy', function(d) {
        return d.y;
      });

    node.exit().remove();


    node = node.enter().append("circle")
      .attr("class","node")
      .style('fill', function(d) {
        return color[d.state];
      })
      .merge(node)
      .attr('r', function(d) {
        return d.score+4;
      })
      .attr('cx', function(d) {
        return d.x;
      })
      .attr('cy', function(d) {
        return d.y;
      });


    // Update and restart the simulation.
    simulation.nodes(nodes);
    simulation.alpha(1).restart();
  }


  function start(counter){
    if(counter < data.length){
      setTimeout(function(){

        nodes = data[counter].state_matrix.nodes;
        draw(nodes);

        counter++;
        start(counter);
      }, 3000);
    }
  }

  draw(nodes);
  start(1);
</script>

如何让每个节点从一步到另一步转换到新状态，而不是每次从0,0飞过新鲜状态？