antvis/G6

Do you want to work on this issue?

You can request for a bounty in order to promote it!

[V5] Dragging the canvas in nextjs leaves the same layout at the initial position #6298

recursively posted onGitHub

Describe the bug / 问题描述

版本5.0.19,在nextjs中拖动画布会在初始位置留下相同的布局,使用示例为官方示例

No response

Steps to Reproduce the Bug or Issue / 重现步骤

官方示例代码:

import { Graph } from '@antv/g6';

fetch('https://assets.antv.antgroup.com/g6/cluster.json')
  .then((res) => res.json())
  .then((data) => {
    const graph = new Graph({
      container: 'container',
      data,
      node: {
        style: {
          labelText: (d) => d.id,
          ports: [],
        },
        palette: {
          type: 'group',
          field: 'cluster',
        },
      },
      layout: {
        type: 'd3-force',
        collide: {
          strength: 0.5,
        },
      },
      behaviors: ['zoom-canvas', 'drag-canvas'],
    });

    graph.render();
  });

初始布局:

<img width="809" alt="image" src="https://github.com/user-attachments/assets/43081e8a-ff5e-4987-87a3-e618832b80a3">

拖动后会在初始位置留下一模一样的布局:

<img width="856" alt="image" src="https://github.com/user-attachments/assets/4531c322-34dd-4c79-aaf0-9fa79b45f69b">

G6 Version / G6 版本

🆕 5.x

Operating System / 操作系统

macOS

Browser / 浏览器

Chrome, Edge

Additional context / 补充说明

No response


Next.js中没有试过,我使用 CRA 暂时没有遇到过这个问题。

posted by resetsix 8 months ago

这种情况下你需要检查是否多次创建了 Graph 实例

posted by Aarebecca 8 months ago

参考一下:https://github.com/antvis/X6/issues/4430

因为React中默认开启StrictMode, 开发环境下Mount会执行两次, 导致创建了两个实例,这种情况下需要做一次销毁

解决方案:要么关闭严格模式,要么保证在每次渲染时销毁上一次的 graph 实例。

useEffect(() => {
  return () => graph?.dispose();
}, []);
posted by resetsix 8 months ago

Fund this Issue

$0.00
Funded
Only logged in users can fund an issue

Pull requests