首先我的需求是一个自左向右的树结构,有一个根节点和 5 - 8个不定的子节点。
因此,在布局上我选择了 compactBox 布局的形式。因为根节点本身无所谓。主要是子节点
以下是我的自定义节点
initCustomNode() {
const that = this;
G6.registerNode('custom-node', {
draw(cfg, group) {
if (cfg.depth === 0) {
return that.drawRootNode(cfg, group);
}
return that.drawOtherNode(cfg, group);
},
getAnchorPoints() {
return [
[0, 0.5], // 左边中心点
[0.98, 0.5], // 右边中心点
];
},
})
},
drawOtherNode(cfg, group) {
const width = 220;
const height = cfg.height; // 这里的每个子节点高度都是不等的
const shape = group.addShape('rect', {
attrs: {
x: -width / 2,
y: -height / 2,
width,
height,
fill: 'l(0) 0:#DBF1FF 0.3:#E8F6FF 1:#F6FBFF',
radius: 8,
lineWidth: 0,
}
});
return shape;
}