将重力应用于有界 d3.js 力布局

Question

我有一个巨大的 d3.js 图，可以正常工作。 有许多过滤器，并且在应用一些过滤器时，图有时会分解为许多子图，而当它分解时，许多子图就会越界。

因此我正在尝试使用重力。

下面是我如何绑定我的子图：

    var width = 1160,
      height = 700,
      radius = 6;
    var svg = d3.select(selector).append("svg")
      .attr("width", width)
      .attr("height", height);

   var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) {
      return d.id;
    }).distance(40).strength(1))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2))
    .force(d3.gravity(0.25));

但这失败了：

  Uncaught ReferenceError: d3.gravity is not a function

所以，我对如何准确地应用重力感到困惑。 d3.js 的新手。

下面是小提琴

Answer 1

这个自定义重力函数成功了：

     var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) {
      return d.id;
    }).distance(40).strength(1))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2))
    .force("gravity",gravity(0.25));


function gravity(alpha) {
  return function(d) {
    d.y += (d.cy - d.y) * alpha;
    d.x += (d.cx - d.x) * alpha;
  };
}

Answer 2

还有另一种使用 d3.v4 的方法：

var simulation = d3.forceSimulation()
  .force('x', d3.forceX(width / 2).strength(0.25))
  .force('y',  d3.forceY(height / 2).strength(0.25))

它在x和y轴上施加重力。 强度越高，该轴上的重力就越密集。