Question

0

71

Views

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

I've this network that works good enough: node position is correctly updated when window width and height change.

Now I'm trying to make it fixed, I mean to compute n ticks once and render the network after n ticks are computed.

I'm not interested to visualize this intermediate steps:

I would like just this:

At the moment the network is computed with 300 ticks (the default value), suppose I want only 100 ticks, I know the nodes won't be in the optimal position but I don't care, I don't want to compute more ticks. How can I do that?

I tried commented the tick event and adding .tick(100).stop() but the network is not centered anymore.

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

I think because the render object has not updated, but I can I do that?

D3 documentation says:

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. ...

3 months ago ·

Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Loading

Accepted Answer · 2022-06-28T06:21:25.986Z

The effect of a single ticks is very small; so you might want to increase that to about 1000.

  .tick(1000).stop()

You do not need to listen to the tick event, but you must force a tick and a re-render when the size changes:

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