手柄与d3.js多焦点力布局碰撞

我是d3.js新手，我想做的是：

我不明白的是，我怎样才能控制圆圈碰撞的方式

---

我尝试过像这样的碰撞函数，但我不知道它是如何工作的。当我更改填充值时，圆圈会一直避免自己。我希望允许碰撞，但不要太多（比如说10px），以确保内部的文本永远不会隐藏。

我实现了以下示例：

我添加了碰撞功能：

// Resolves collisions between d and all other circles.
function collide(alpha) {
  var quadtree = d3.geom.quadtree(nodes);
  return function(d) {
    //console.log(d)
    var r = d.r + 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.r + quad.point.r + (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;
    });
  };
}

上面减少了数据数组，得到了r（半径）的最大值。这是我唯一的改变

我已经更新了你的勾号功能：

function tick(e) {
  var k = .1 * e.alpha;

  // Push nodes toward their designated focus.
  nodes.forEach(function(o, i) {
   // console.log(o)
    o.y += (foci[o.id].y - o.y) * k;
    o.x += (foci[o.id].x - o.x) * k;
  });

  node
    .each(collide(.5)) //call collide function here
    .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; })
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

}

这将处理好您的多焦点和碰撞检测

---

更新的提琴：

我一直使用提琴，不喜欢codepen的布局，如果你想知道我为什么这么做：）希望这能帮你很多忙，我不能说我已经理解了，但是当我把负值变成填充时，我得到了我想要的。我正在研究另一个例子：，使用v4不是更简单的方法吗？

var maxRadius = data.reduce(function(sum, d){
  return Math.max(sum,d.r)
}, 0); //get maximum radius

function tick(e) {
  var k = .1 * e.alpha;

  // Push nodes toward their designated focus.
  nodes.forEach(function(o, i) {
   // console.log(o)
    o.y += (foci[o.id].y - o.y) * k;
    o.x += (foci[o.id].x - o.x) * k;
  });

  node
    .each(collide(.5)) //call collide function here
    .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; })
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

}