antvis/G6

自定义节点更新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官网中运行 微信截图_20240112110309

除了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


Hi @chenxiaobaic, Please star this repo if you find it useful! Thanks :star:! 你好 @chenxiaobaic。如果该仓库对你有用,可以 star 一下,感谢你的 :star:!

posted by github-actions[bot] over 1 year ago
posted by hustcc about 1 year ago

Fund this Issue

$0.00
Funded

Pull requests