antvis/G6

circle-node 部分label 无法显示 #5625

luckysnowy posted onGitHub

graphData定义如下:

const data = {
    nodes: [
        {
            id: 'n1',
            data: {
                x: 15,
                y: 150,
                type: 'circle-node',
                keyShape: {//定义圆的属性
                    r: 16,
                    fill: '#fff',
                },
                labelShape: {
                    text: 'A',
                    position: 'bottom',
                    fill: '#ffffff',
                },
            }
        },
        {
            id: 'n2',
            data: {
                x: 100,
                y: 150,
                type: 'circle-node',
                keyShape: {//定义圆的属性
                    r: 16,
                    fill: '#fff',
                },
                labelShape: {
                    text: 'B',
                    position: 'bottom',
                    fill: '#ffffff',
                },
            }
        },
        {
            id: 'n3',
            data: {
                x: 150,
                y: 50,
                type: 'circle-node',
                keyShape: {//定义圆的属性
                    r: 16,
                    fill: '#fff',
                },
                labelShape: {
                    text: 'C',
                    position: 'top',
                    fill: '#ffffff',
                },
            }
        },
        {
            id: 'n4',
            data: {
                x: 180,
                y: 150,
                type: 'circle-node',
                keyShape: {//定义圆的属性
                    r: 16,
                    fill: '#fff',
                },
                labelShape: {
                    text: 'D',
                    position: 'top',
                    fill: '#ffffff',
                },
            }
        },
        {
            id: 'n5',
            data: {
                x: 190,
                y: 230,
                type: 'circle-node',
                keyShape: {//定义圆的属性
                    r: 16,
                    fill: '#fff',
                },
                labelShape: {
                    text: 'E',
                    position: 'bottom',
                    fill: '#ffffff',
                },
            }
        },
        {
            id: 'n6',
            data: {
                x: 290,
                y: 50,
                type: 'circle-node',
                keyShape: {//定义圆的属性
                    r: 16,
                    fill: '#fff',
                },
                labelShape: {
                    text: 'F',
                    position: 'bottom',
                    fill: '#ffffff',
                },
            }
        },
        {
            id: 'n7',
            data: {
                x: 290,
                y: 150,
                type: 'circle-node',
                keyShape: {//定义圆的属性
                    r: 16,
                    fill: '#fff',
                },
                labelShape: {
                    text: 'G',
                    position: 'bottom',
                    fill: '#ffffff',
                },
            }
        },
        {
            id: 'n8',
            data: {
                x: 290,
                y: 230,
                type: 'circle-node',
                keyShape: {//定义圆的属性
                    r: 16,
                    fill: '#fff',
                },
                labelShape: {
                    text: 'H',
                    position: 'bottom',
                    fill: '#ffffff',
                },
            }
        },
    ],
    edges: [
        {
            id: 'e1',
            source: 'n2',
            target: 'n1',
        },
        {
            id: 'e2',
            source: 'n3',
            target: 'n2',
        },
        {
            id: 'e3',
            source: 'n6',
            target: 'n3',
        },
        {
            id: 'e4',
            source: 'n4',
            target: 'n2',
        },
        {
            id: 'e5',
            source: 'n7',
            target: 'n4',
        },
        {
            id: 'e6',
            source: 'n5',
            target: 'n2',
        },
        {
            id: 'e7',
            source: 'n4',
            target: 'n5',
        },
        {
            id: 'e8',
            source: 'n5',
            target: 'n8',
        }
    ],
}

基于上述data,图绘制时,第二、三、四、七个节点的label无法显示,使用版本5.0.0-beta.28 <img width="194" alt="图片绘制结果" src="https://github.com/antvis/G6/assets/44014606/2dd9e20e-21bb-4895-bc95-3f4e827dc8f2">


使用的版本是什么

posted by Aarebecca about 1 year ago

使用的版本是什么

5.0beta.28里边树图有些数据会默认把labelShape里边attribute的visibility设置为hidden是啥情况,有的又是visible,啥也没改,就莫名其妙给设置hidden了,drawLabelShape打印的shapemap里边

posted by mhfe123 about 1 year ago

beta.28 之后的版本已经修正该问题

posted by Aarebecca about 1 year ago

Fund this Issue

$0.00
Funded

Pull requests