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新手。

以下是fiddle

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轴上施加重力。强度越高，该轴上的重力将越密集。

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

2 个答案: