The issue has been closed

多层combo如何实现布局 #4765

lilegang1589 posted onGitHub

问题描述

现有的ComboCombined布局支持外层combo和combo内的布局，不能实现combo内部嵌套combo的布局，如何布局能实现combo内部嵌套combo的按照自己的想法布局。

重现链接

http://g6.antv.antgroup.com/api/graph-layout/combo-combined

重现步骤

1.目前拓扑图外层是dagre布局实现，内层是grid布局 2.combo内部combo也是按照grid布局，但是排列不对

预期行为

combo内部combo是一列的，combo内部的节点是3列的。

平台

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

屏幕截图或视频（可选）

现有效果 <img width="531" alt="image" src="https://github.com/antvis/G6/assets/31850636/02ca57f5-c11e-413e-9fb3-ddb1721e4561"> 期望效果 <img width="658" alt="image" src="https://github.com/antvis/G6/assets/31850636/342d5c1e-51a4-4087-a30e-2cf4e5828731">

补充说明（可选）

No response

grid布局应该是可以自定义rows和cols的：http://g6.antv.antgroup.com/api/graph-layout/grid#layoutcfgrows 可以调试一下如果达不到理想效果可以自定义布局：http://g6.antv.antgroup.com/api/register-layout

posted by ravengao over 1 year ago

grid布局应该是可以自定义rows和cols的：http://g6.antv.antgroup.com/api/graph-layout/grid#layoutcfgrows 可以调试一下如果达不到理想效果可以自定义布局：http://g6.antv.antgroup.com/api/register-layout

grid布局是在combos内部节点使用的，中间层的combo也会延用，不能很好的分开，自定义布局有没有相关的实例

posted by lilegang1589 over 1 year ago

可以尝试一下在data里给每个combo加一个层相关的prop，比如level: <some_value>。然后自定义一个innerLayout

    layout: {
      type: 'comboCombined',
      innerLayout: new G6.Layout['custom-inner-layout']({}),
      ...
    },

在自定义innerLayout里检查每一层combo的level prop，自己计算每个combo与node的[x, y]

G6.registerLayout('custom-inner-layout', {
    ...
    execute() {
        const self = this;
        const {nodes} = self;

        // 根据需求，计算nodes的坐标[x, y]并赋值回每一个self.node, e.g. node.x=10; node.y=20;
    }

可以参考这个自定义布局的例子：http://g6.antv.antgroup.com/examples/net/layoutMechanism/#customBigraph

posted by ravengao over 1 year ago

This issue has been closed because it has been outdate for a long time. Please open a new issue if you still need help.

这个 issue 已经被关闭，因为 它已经过期很久了。如果你仍然需要帮助，请创建一个新的 issue。

posted by github-actions[bot] 10 months ago

Fund this Issue

$0.00

Funded

Pull requests

多层combo如何实现布局 #4765

问题描述

重现链接

重现步骤

预期行为

平台

屏幕截图或视频（可选）

补充说明（可选）

Company

Community

Support

Connect