antvis/G6

No Animation in gForce Layout and Initial Positioning Issues #4704

Gykonik posted onGitHub

Describe the bug

I'm encountering two issues related to the gForce layout (but also others) in the G6 library. Here are the details:

  1. No animation during the layout process: Despite configuring the layout with animate: true, the gForce layout does not animate during the layout process. Instead, it immediately "jumps" to the final layout once it's calculated. Other layouts like force didn't work smoothly for me either. Is there a way to enable animation for the gForce layout, or am I doing something wrong?
  2. Initial graph positioning: The graph initially appears in the top left corner of the container and then abruptly jumps to the center after the layouting has finished. Is there a way to achieve a smooth transition where the graph gradually moves to the center of the container once the layout process is complete?

Your Example Website or App

https://codesandbox.io/p/sandbox/romantic-grothendieck-6h4vtc?file=undefined

Steps to Reproduce the Bug or Issue

Just open the code sandbox and wait until the layout has finished (= graph jumps in the center)

Expected behavior

I would expect the graph to initially be in the center of the screen. Afterwards, it should nicely animate its node positions and edges until the final and stable force-directed layout has been reached.

Screenshots or Videos

No response

Platform

  • OS: [Windows]
  • Browser: [Chrome]
  • Version: [114.0.5735.199]

Additional context

No response


If you enable gpu or worker with gpuEnabled / workerEnabled, it has to be this. Since it could not clone result from worker or gpu at each iteration (which cost a lot). You data is quite large, it need some time to calculate the layout and when the layout is finished, the position will be applied to the nodes in the view.

How many nodes in the demo? Try this solution to speed up the layout: https://github.com/antvis/G6/issues/4333#issuecomment-1457925009

In english: fruchterman (gForce in your case) supports GPU layout, and the performance of supporting GPU layout is the best when comparing large-scale data. On the contrary, the performance of GPU is not so good for small-scale data. Force2 is slow, because the convergence speed and result of the force guide are very dependent on the initial input position. If there is a good initial position, the layout will end quickly. You can configure a pre-layout for force2 through the layout preset. I just released a beta version @antv/g6@4.8.8-beta.0, which supports preset configuration gpuEnabled (the previous version preset cannot run the layout of gpuEnabled), so you can use fruchterman or gForce's gpu version as a preset, and then Running force2 can speed up a lot.

In addition, the parameters of force2 may also affect the speed. I mocked the data of a 3k node, and the speed is faster under this configuration:

layout: {
        preset: {
          type: 'gForce',
          gpuEnabled: true,
          gravity: 1,
          width: 1000,
          height: 1000,
        },
        type: 'force2',
        animate: true,
        linkDistance: 50,
        maxSpeed: 2000,
        damping: 0.3,
        interval: 0.05,
        minMovement: 5,
      },
posted by Yanyan-Wang almost 2 years ago

Fund this Issue

$0.00
Funded

Pull requests