自定义布局的问题 #5232

问题描述

需求：第1层级横向排列，从第2层级开始纵向排列 实现方式：整体紧凑树布局，从第2层级开始使用缩进树布局的自定义布局 问题：缩进树布局的节点起始位置不对

重现链接

暂无

重现步骤

-

预期行为

平台

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

屏幕截图或视频（可选）

No response

补充说明（可选）

代码参考了https://github.com/antvis/G6/issues/5062 中的 https://codesandbox.io/s/ecstatic-phoebe-95kxjg 附上layout部分代码 ` layout: ((d: any) => { const compactBoxConfig = { type: 'compactBox', direction: 'TB', getId: function getId(d: any) { return d.id; }, getHeight: function getHeight() { return 84; }, getWidth: function getWidth() { return 233; }, getVGap: function getVGap() { return 20; }, getHGap: function getHGap() { return 20; }, }; const layoutData = Hierarchy[compactBoxConfig.type]( d, compactBoxConfig, );

    const indentConfig = {
      type: 'indented',
      isHorizontal: true,
      direction: 'LR',
      indent: 140,
      getHeight: function getHeight() {
        return 84;
      },
      getWidth: function getWidth() {
        return 233;
      },
    };

    const loop = (tree: any) => {
      if (tree.depth >= 2 && tree.children?.length > 0) {
        const subLayoutData = Hierarchy[indentConfig.type](
          tree,
          indentConfig,
        );
        const childrenBeginX = subLayoutData.children[0].x;
        const displacementX = subLayoutData.x - childrenBeginX;
        G6.Util.traverseTree(subLayoutData, (node: any) => {
          if (node.id === subLayoutData.id) return;
          node.x += displacementX;
        });
      } else {
        if (tree.children?.length > 0) {
          tree.children.forEach((item: any) => {
            loop(item);
          });
        }
      }
    };

    loop(layoutData);

    return layoutData;
  }) as any,`