antvis/G6

Asynchronous graph rendering #4623

Damiry0 posted onGitHub

问题描述

Hi, I would like to change my graph after every iteration in a loop and render it so I can see the changes in real time. Each time I try to render my graph with the applied changes in a given loop in the iteration I don't see any changes until the loop is over. All the changes are applied at the end of the function. Is there a way to render the graph in a asynchronous way ?

重现链接

na

重现步骤

animateGraph(): void {
 for (let i = 0; i < this.response.iterations.length; i++) {
      this.graphData = this.getIterationChange(this.graph_temp, i); \\ generating data
      \\ some kind of sleep
      this.graph_canvas.changeData(this.graphData); \\ changing data and rendering
    }
}

预期行为

na

平台

Windows 10/11

屏幕截图或视频(可选)

No response

补充说明(可选)

No response


for is a synchronous function. You should use setInterval with 16ms (which is the refreshing interval of browser) interval time or requestAnimationFrame instead, e.g.

setInterval(() => {
      this.graphData = this.getIterationChange(this.graph_temp, i); \\ generating data
      \\ some kind of sleep
      this.graph_canvas.changeData(this.graphData); \\ changing data and rendering
}, 16)
posted by Yanyan-Wang almost 2 years ago

Fund this Issue

$0.00
Funded

Pull requests