使d3加快静态布局的速度

Question

我是d3js的新手。我绘制了一个图〜10000个节点。

我使用了Web工作程序和静态强制渲染（因为普通渲染的成本是Web工作程序的两倍以上）。

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

当范围为10000时，它将花费将近20秒，您可以在控制台上看到它，那么如何减少这种时间呢？

jsfiddle

github上的整个代码

Answer 1

您正在寻找修改 alpha 衰减率，它控制力模拟冷却的速度：

alpha 衰减率决定了当前 alpha 插入到所需目标 alpha 的速度；由于默认目标 alpha 为零，默认情况下这控制模拟冷却的速度。较高的衰减率会使模拟更快地稳定下来，但有陷入局部最小值的风险；较低的值会导致模拟运行时间更长，但通常会收敛到更好的布局。要让模拟在当前 alpha 下永远运行，请将衰减率设置为零；或者，将目标 alpha 设置为大于最小 alpha [以减少冷却时间]。( api 文档)。

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)

成本可能是不太理想的布局，但这将加速最终结果。这是一个更新的小提琴。