javascript - 使d3强制静态布局更快

Question

我是新来的 d3js .我渲染了一个约 10000 个节点的图表。

我使用了 web worker 和静态强制渲染(因为普通渲染的成本是 web worker 的两倍多)。

// js
var nodes = d3.range(10000).map(function(i) {
  return {
    index: i
  };
});

当range为10000时，会耗时将近20秒，在console可以看到，那么如何减少这个时间呢？

jsfiddle

Answer 1

您要修改 alpha 衰减率，它控制力模拟冷却的速度:

The alpha decay rate determines how quickly the current alpha interpolates towards the desired target alpha; since the default target alpha is zero, by default this controls how quickly the simulation cools. Higher decay rates cause the simulation to stabilize more quickly, but risk getting stuck in a local minimum; lower values cause the simulation to take longer to run, but typically converge on a better layout. To have the simulation run forever at the current alpha, set the decay rate to zero; alternatively, set a target alpha greater than the minimum alpha [to decrease cooling time]. (api docs).

alpha decay 的默认设置是~0.0228，如果你想减少力冷却所需的时间，你可以增加alpha decay rate 使其冷却得更快:

  var simulation = d3.forceSimulation(nodes)
      .force("charge", d3.forceManyBody())
      .force("link", d3.forceLink(links).distance(20).strength(1))
      .force("x", d3.forceX())
      .force("y", d3.forceY())
      .alphaDecay(0.5)

成本可能是不太理想的布局，但这会加快最终结果的速度。这是一个 Updated fiddle.