D3.js（v3）集群力布局-如何将一个集群的圆（节点）附加到另一个集群？

Question

我正在尝试使用D3强大的强制布局模式，但是我一直试图将从左边的第一个簇添加到右边的第二个簇上的圆（节点）。当前总共有1000个节点，其中包含2个唯一的群集（每个群集500个节点）。理想情况下，我想呈现当前拥有的drawAnimation（）函数，然后说5秒后，第一个集群的一半节点将移至第二个集群，因此左侧的集群将有250个总节点，而群集在右边的750个总节点上。

我认为我在这里注释掉的setInterval（）函数在正确的轨道上。但是，除了只想做一次（据我所知，在这里不适合使用setInterval），它似乎基于两个节点之间的相对半径差将节点附加到两个群集中的一个上，这就是我没有试图实现。而且，我假设我可能需要调整力变量的计费方法，但这纯粹是推测。

代码如下：

function drawAnimation() {
  var width = 1000,
  height = 1000,
  padding = 10, // separation between same-color nodes
  clusterPadding = 1, // separation between different-color nodes
  maxRadius = 2;

  var n = 1000, // total number of nodes
   m = 2; // number of distinct clusters

  var color = d3.scale.category10()
    .domain(d3.range(m));

  // The largest node for each cluster.
  var clusters = new Array(m);

  var nodes = d3.range(n).map(function() {
    var i = Math.floor(Math.random() * m),
      r = Math.sqrt((i + 1) / m * -Math.log(Math.random())) * maxRadius,   
      d = {cluster: i, radius: r};
    if (!clusters[i] || (r > clusters[i].radius)) clusters[i] = d;
       return d;
    });

  //    Use the pack layout to initialize node positions.
  var pack = d3.layout.pack()
    .sort(null)
    .size([width, height])
    .children(function(d) { return d.values; })
    .value(function(d) { return d.radius * d.radius; })
    .nodes({values: d3.nest()
    .key(function(d) { return d.cluster; })
    .entries(nodes)});

  var force = d3.layout.force()
    .nodes(nodes)
    .size([width, height])
    .gravity(0)
    .charge(function(d) {
      if(d.radius == clusters[d.cluster].radius) {
        return(-10 * d.radius);
      }
      else {
        return(0);
      }
   })
  .on("tick", tick)
  .start();

  var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

  var node = svg.selectAll("circle")
    .data(nodes)
    .enter().append("circle")
    .style("fill", function(d) { return color(d.cluster); })
    .call(force.drag);

  node.transition()
    .duration(100)
   /*       .delay(function(d, i) { return i * 5; }) */
  .attrTween("r", function(d) {
    var i = d3.interpolate(0, d.radius);
    return function(t) { return d.radius = i(t); };
  });


  /*setInterval(function() {

  var i = Math.floor(Math.random() * m),
       r = Math.sqrt((i + 1) / m * -Math.log(Math.random())) * maxRadius,   
       d = {cluster: i, radius: r, depth: 2};
  if(d.radius < clusters[d.cluster].radius ) {
    nodes.push(d);
  }

  node = node.data(nodes);
  node.enter().append("circle")
    .style("fill", function(d) { return color(d.cluster); })
    .attr({r: function(d) { return(d.radius); },
      cx: function(d) { return(d.x); },
      cy: function(d) { return(d.y); },
    })
    .call(force.drag);
  force.start();

  }, 100); */


 function tick(e) {
    node
    .each(cluster(e.alpha * .1)) 
    .each(collide(e.alpha * 2))
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });
  }

  // Move d to be adjacent to the cluster node.
   function cluster(alpha) {
    return function(d) {
    var cluster = clusters[d.cluster];
    if (cluster === d) return;
     var x = d.x - cluster.x,
      y = d.y - cluster.y,
      l = Math.sqrt(x * x + y * y),
      r = d.radius + cluster.radius + 10;
    if (l != r) {
      l = (l - r) / l * alpha;
      d.x -= x *= l;
      d.y -= y *= l;
      cluster.x += x;
      cluster.y += y;
    }
  };
  }

// Resolves collisions between d and all other circles.
function collide(alpha) {
  var quadtree = d3.geom.quadtree(nodes);
  return function(d) {
     var r = d.radius + maxRadius + Math.max(padding, clusterPadding), 
      nx1 = d.x - r,
      nx2 = d.x + r,
      ny1 = d.y - r,
      ny2 = d.y + r;
    quadtree.visit(function(quad, x1, y1, x2, y2) {
      if (quad.point && (quad.point !== d)) {
        var x = d.x - quad.point.x,
          y = d.y - quad.point.y,
          l = Math.sqrt(x * x + y * y),
          r = d.radius + quad.point.radius + (d.cluster === quad.point.cluster ? padding : 
          clusterPadding);
        if (l < r) {
          l = (l - r) / l * alpha;
          d.x -= x *= l;
          d.y -= y *= l;
          quad.point.x += x;
          quad.point.y += y;
        }
      }
      return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
    });
  };
  }
 }


drawAnimation();

这是我的小提琴：

https://jsfiddle.net/bullybear/xajsy0fh/75/

任何帮助将不胜感激。