javascript - 是否可以跳过 D3 强制布局中的初始转换？

Question

我使用了来自此处的 D3 示例力布局数据:https://bl.ocks.org/mbostock/4062045

并将其转移到这个例子中:https://bl.ocks.org/mbostock/1804919

结果 JSFiddle:https://jsfiddle.net/thatOneGuy/q2shr6ne/6/

这很好用，但我需要它能够处理数千个节点。我已经用大约 3000 次对其进行了测试，需要几分钟才能解决。这里的例子:https://jsfiddle.net/thatOneGuy/q2shr6ne/7/

我已经找到了这个例子以及更多:

How to speed up the force layout animation in d3.js

但我需要有他们的结束位置，因为我不想在开始时有任何过渡。这可能吗？

他们如何定位的代码:

function tick(e) {

  circle
      .each(gravity(0.2*e.alpha))
      .each(collide(.5))
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
}

// Move nodes toward cluster focus.
function gravity(alpha) {
  return function(d) { 
    d.y += (d.cy - d.y) * alpha;
    d.x += (d.cx - d.x) * alpha;
  };
}

// Resolve collisions between nodes.
function collide(alpha) {
  var quadtree = d3.geom.quadtree(data.nodes);
  return function(d) {
 // console.log(d.radius)
    var r = d.radius + maxRadius + padding,
        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.color !== quad.point.color) * padding;
        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;
    });
  };
}

我找到了这个例子:http://bl.ocks.org/mbostock/1667139

但是实现起来很困难......

Answer 1

你的例子对我来说很好:

  setTimeout(function() {

      force.start();
      for (var i = n * n; i > 0; --i) force.tick();
      force.stop();
  }, 10);

并在force定义之后注释start()

参见:https://jsfiddle.net/q2shr6ne/8/