antvis / antvis/G6

The custom node registerNode rewrites the draw logic, but there is a problem with the actual layout

Open
#6,348 0 comments 0 reactions 0 assignees View on GitHub
v4
Dominant language
TypeScript
Stars
12.3k
Forks
1.6k
PR merge metrics
No merged PRs in 30d

Description

### 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 / 补充说明

```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the supplied G6 4.x example with the customNode registerNode draw function, SVG renderer, fitView and fitCenter disabled, and layout set to null. Compare the node's configured { x: 0, y: 0 } position with its rendered position; done means the cause is identified and the node is placed at the canvas top-left without an active layout.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.