自定义节点更新label会在画布下留有痕迹 #5343
chenxiaobaic posted onGitHub
G6 Version
4.x
Describe the bug
自定义一个节点,该节点的label默认截取五个字符,鼠标移入label显示完整label,移出则显示截取部分,label会在画布上留下痕迹,
Your Example Website or App
https://g6.antv.antgroup.com/zh/examples/item/label/#copyLabel
Steps to Reproduce the Bug or Issue
代码如下所示 import G6 from "@antv/g6";
G6.registerNode( 'long-text-node', { draw(cfg, group) { const circle = group.addShape('circle', { attrs: { x: 0, y: 0, r: cfg.size / 2 || 30, ...cfg.style, }, }) // 添加 label const text = group.addShape('text', { attrs: { x: 0, y: cfg.size ? cfg.size * 0.8 : 40, textAlign: 'center', textBaseline: 'middle', text: cfg.label.length > 5 ? cfg.label.substring(0, 5) + '...' : cfg.label, fill: 'black', ...cfg.labelCfg.style, }, name: 'text-shape', }) // 为 label 添加鼠标移入事件 text.on('mouseenter', () => { text.attr({ text: cfg.label }) }) // 为 label 添加鼠标移出事件 text.on('mouseleave', () => { text.attr({ text: cfg.label.length > 5 ? cfg.label.substring(0, 5) + '...' : cfg.label }) }) return circle }, }, 'circle' )
const data = { nodes: [ { id: "node1", label: "This label is too long to be displayed", }, { id: "node2", label: "Short Label", } ] };
const width = document.getElementById("container").scrollWidth; const height = document.getElementById("container").scrollHeight || 500; const graph = new G6.Graph({ container: "container", width, height: height - 50, modes: { default: ['drag-canvas', 'zoom-canvas'], }, // translate the graph to align the canvas's center, support by v3.5.1 fitCenter: true, defaultNode: { type: "long-text-node", size: 40, style: { fill: '#5B8FF9', stroke: '#5B8FF9', lineWidth: 0, }, labelCfg: { position: 'bottom', }, }, defaultEdge: { color: "#F6BD16" } });
graph.data(data);
graph.render();
可将以上代码复制到https://g6.antv.antgroup.com/zh/examples/item/label/#copyLabel官网中运行
除了graph.get('canvas').set('localRefresh', false)外还有其他解决方案吗
Expected behavior
正常显示label
Screenshots or Videos
No response
Platform
- OS: [e.g. macOS, Windows, Linux]
- Browser: [e.g. Chrome, Safari, Firefox]
- Version: [e.g. 91.1]
Additional context
No response