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);

并在start()定义

之后对force发表评论

请参阅：https://jsfiddle.net/q2shr6ne/8/

是否可以跳过D3力布局中的初始过渡？

1 个答案: