在 Svelte 和 d3 中使用静态力布局创建网络

Question

我 this network 已经足够好了：当 window 宽度和高度发生变化时，节点位置会正确更新。

现在我正在尝试修复它，我的意思是计算一次 n 刻度并在计算 n 个刻度后渲染网络。

我不想想象这个中间步骤：

我想要这个：

目前网络是用 300 个刻度（默认值）计算的，假设我只需要 100 个刻度，我知道节点不会处于最佳位置，但我不在乎，我不在乎不想计算更多的滴答声。我该怎么做？

我尝试评论 tick 事件并添加 .tick(100).stop() 但网络不再居中。

  //.on("tick", simulationUpdate)
  .tick(100)
  .stop()

我想是因为渲染对象还没有更新，但我可以这样做吗？

D3 文档说：

simulation.tick([iterations])

... This method does not dispatch events; events are only dispatched by the internal timer when the simulation is started automatically upon creation or by calling simulation.restart. The natural number of ticks when the simulation is started is ⌈log(alphaMin) / log(1 - alphaDecay)⌉; by default, this is 300. ...

Answer 1

单个刻度的影响很小；所以你可能想把它增加到大约 1000.

  .tick(1000).stop()

不需要监听tick事件，但必须在大小变化时强制勾选和re-render:

  $: {
    simulation
      .force("center")
      .x(width / 2)
      .y(height / 2);
    simulation.tick();
    simulationUpdate();
  }

在 Svelte 和 d3 中使用静态力布局创建网络

Use a static force layout to create a network in Svelte and d3

javascript

d3.js

svelte