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();

No response

Steps to Reproduce the Bug or Issue / 重现步骤

No response

G6 Version / G6 版本

4.x

Operating System / 操作系统

Windows

Browser / 浏览器

Chrome

Additional context / 补充说明

```


Fund this Issue

$0.00
Funded
Only logged in users can fund an issue

Pull requests