mindmap布局 如果节点高度不一致，本应该在一条水平线上的节点，高度会参差不齐，出现折线

[chi-gao]

问题描述

mindmap布局，如果节点高度不一致，布局好像是以 节点底部对齐进行布局的，而不是以节点中心。参考下图：

重现链接

https://codesandbox.io/s/happy-diffie-xrsb5?file=/src/index.js

重现步骤

打开复现链接直接查看即可

预期行为

期望基于节点中心进行布局

平台

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

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[Yanyan-Wang]

是因为你 demo 中设置了 mindmap 布局的 getHeight 返回全部是 16 哈，导致所有节点在布局中占据的空间位置都是 16 了。把 getHeight 配置去掉或者根据每个节点数据返回正确的节点高度即可。

[chi-gao]

是因为你 demo 中设置了 mindmap 布局的 getHeight 返回全部是 16 哈，导致所有节点在布局中占据的空间位置都是 16 了。把 getHeight 配置去掉或者根据每个节点数据返回正确的节点高度即可。

不是的啊，getHeight我设置的就是节点本身的高度，而这个高度就是不一样的。辛苦再看下代码哈

我的诉求是：虽然高度不同，但是应该以中心来对齐，而不是底部对齐。这样导致一条直线变成了 折线。 不知道我有没有表达清楚？

[Yanyan-Wang]

抱歉看错 getHeight 返回内容, getHeight 不定义或者返回同一个值似乎可以满足这个需求……不确定会不会给你的展示带来其他问题？

[chi-gao]

抱歉看错 getHeight 返回内容, getHeight 不定义或者返回同一个值似乎可以满足这个需求……不确定会不会给你的展示带来其他问题？

会的，getHeight返回固定值，但实际的高度不一致，会导致计算高度的时候有问题，如果同层存在不同高度的节点，会导致节点布局重叠 或者 间隙不固定。

所以这个是设计初衷就是这样还是？是否存在简单修改的方法让他能够 基于中心布局？

[Yanyan-Wang]

可以这样自定义一个继承内置 rect 的节点类型：

G6.registerNode('cRect', {
afterDraw: function(cfg, group) {
const children = group.get('children');
// 将所有图形平移
children.forEach(child => {
const { x, y } = child.attr();
child.attr({
x: x + (cfg.size?.[0] || 0) / 2,
y: y + (cfg.size?.[1] || 0) / 2,
})

})

}
}, 'rect');

然后 node 的 type 使用这个自定义的节点类型 cType

意在改变内置 rect 节点的自身坐标系中心

[chi-gao]

可以这样自定义一个继承内置 rect 的节点类型：

G6.registerNode('cRect', { afterDraw: function(cfg, group) { const children = group.get('children'); // 将所有图形平移 children.forEach(child => { const { x, y } = child.attr(); child.attr({ x: x + (cfg.size?.[0] || 0) / 2, y: y + (cfg.size?.[1] || 0) / 2, })

})

} }, 'rect');

然后 node 的 type 使用这个自定义的节点类型 cType

意在改变内置 rect 节点的自身坐标系中心

感谢回复，我试一下

[oo10]

遇到相同的问题 请问解决了吗?

[oo10]

自定义节点高度不一致的时候, 设置了anchorPoints, 但本应该是直线却还是变成了折线相连。