antvis/G6
Do you want to work on this issue?
You can request for a bounty in order to promote it!
The custom node registerNode rewrites the draw logic, but there is a problem with the actual layout #6348
wjs0406 posted onGitHub
Describe the bug / 问题描述
通过自定义节点registerNode重写draw逻辑,但实际布局有问题,我的节点位置是{ x:0, y:0 },但节点实际并不在画布的左上角,而是在画布中间,画布并没有使用任何layout,代码如下:
G6.registerNode('customNode', {
draw: function draw(cfg, group) {
// 绘制节点主体
const rect = group.addShape('rect', {
attrs: {
x: 0,
y: 0,
width: 120,
height: 40,
fill: '#DD5041',
}
});
// 创建文本
const text = group.addShape('text', {
attrs: {
x: 0,
y: 0,
textBaseline: 'top',
text: '测试文本节点', // 文本内容
fill: '#CCC', // 文本颜色
fontSize: 12, // 文本大小
fontFamily: 'MicrosoftYaHei',
},
});
return rect;
},
}, 'rect');
初始化逻辑:
const gData = formatGuiData(res.data); // 通过一些逻辑处理好了所有的nodes和edges数据
graph.value = new G6.Graph({
container: document.getElementById('container'),
groupByTypes: false,
renderer: 'svg', // 使用 canvas 或 svg 渲染
fitView: false,
fitCenter: false, // 图中心对齐到画布中心
animate: false, // 禁用动画
enabledStack: true, // 是否启用 stack - 开启 redo & undo 功能
minZoom: 0.2, // 最小缩放比例
maxZoom: 2, // 最大缩放比例
layout: null
data: gData
});
graph.value.render();
Reproduction link / 重现链接
No response
Steps to Reproduce the Bug or Issue / 重现步骤
No response
G6 Version / G6 版本
4.x
Operating System / 操作系统
Windows
Browser / 浏览器
Chrome
Additional context / 补充说明
```