The issue has been closed

子图布局和配置布局结果不一致 #4657

mugo1993-ss posted onGitHub

问题描述

渲染前调用子图布局处理数据和直接配置layout图结果不一样

重现链接

https://stackblitz.com/edit/vue-wveeno?file=src%2FApp.vue

重现步骤

1.在图布局时。设置两种相同的布局 2.一种设置为子图布局，在graph.data(data)前调用相关代码： // 初始化布局，灌入子图数据 ---1.子图布局 const subgraphLayout = new G6.Layout['fruchterman']({ gravity: 5, }); subgraphLayout.init({ nodes: data.nodes, edges: data.edges, }); subgraphLayout.execute(); this.graph?.data(data); 渲染结果：企业微信截图_16868797936585 3.一种直接配置layout 相关代码： // ----2.配置布局 layout: { type: 'fruchterman', gravity: 5, }, 渲染结果：企业微信截图_16868798325497

预期行为

希望能看到相同的结果

平台

操作系统: [macOS, Windows, Linux, React Native ...]
网页浏览器: [Google Chrome, Safari, Firefox]
G6 版本: [4.5.1 ... ]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

更新一个 codesandbox的地址：https://codesandbox.io/s/relaxed-benji-p2znzy?file=/src/App.js

posted by mugo1993-ss almost 2 years ago

几个问题哈，fruchterman 默认是异步的（每个迭代放在 setInterval 里面方便每一帧都刷新画布看起来有动画），G6 会把这个异步动画关掉，除非给 fruchterman 配置 animate: true 手动开启。所以你这里单独使用的时候看起来完全是 random 的位置就是因为渲染的时候实际上没有布局完成，把子图布局的 animate 关闭即可。第二个问题，G6 调用布局的时候会把 width height center 传进去，你这里要达到一样的效果也需要传一下，这里是我改过的配置

    const subgraphLayout = new G6.Layout["fruchterman"]({
      gravity: 5,
      width,
      height,
      center: [width / 2, height / 2],
      animate: false,
    });

posted by Yanyan-Wang almost 2 years ago

谢谢大佬。已经完美解决~~

posted by mugo1993-ss almost 2 years ago

先关闭咯，记得拉上小伙伴点点 star ～

posted by Yanyan-Wang almost 2 years ago

好的好的~

posted by mugo1993-ss almost 2 years ago

Fund this Issue

$0.00

Funded

Pull requests

子图布局和配置布局结果不一致 #4657

问题描述

重现链接

重现步骤

预期行为

平台

屏幕截图或视频（可选）

补充说明（可选）

Company

Community

Support

Connect