使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衰减的默认设置是~0.0228，如果你想减少力冷却所需的时间，你可以增加alpha衰减率，使其冷却得更快：

  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.

Answer 2

我不认为正确的答案是降低 alpha 衰减的值。虽然节省了时间，但是排版的效果并不好

之所以时间成本高，是因为大部分时间花在渲染布局的过程中。您可以使用一个名为 NetV.js 的新工具，它使用 WebGL 渲染大型网络并加速渲染过程。

您可以将此 demo 的数据集更改为您的数据集并查看生成的布局。

使d3强制静态布局更快

make d3 force static layout more quickly

javascript

web-worker

d3.js