IssueHuntrenderer为svg时，lineAppendWidth失效 #5090
pupu0520 posted onGitHub
问题描述
renderer为svg时，lineAppendWidth失效
重现链接
https://g6.antv.antgroup.com/examples/tool/tooltip/#tooltipFix
重现步骤
import G6 from '@antv/g6'; import insertCss from 'insert-css';
insertCss(.g6-component-tooltip {
background-color: rgba(255, 255, 255, 0.8);
padding: 0px 10px 24px 10px;
box-shadow: rgb(174, 174, 174) 0px 0px 10px;
});
const data = {
nodes: [
{
id: '0',
label: 'node-0',
x: 100,
y: 100,
description: 'This is node-0.',
subdescription: 'This is subdescription of node-0.',
},
{
id: '1',
label: 'node-1',
x: 250,
y: 100,
description: 'This is node-1.',
subdescription: 'This is subdescription of node-1.',
},
{
id: '2',
label: 'node-2',
x: 150,
y: 310,
description: 'This is node-2.',
subdescription: 'This is subdescription of node-2.',
},
{
id: '3',
label: 'node-3',
x: 320,
y: 310,
description: 'This is node-3.',
subdescription: 'This is subdescription of node-3.',
},
],
edges: [
{
id: 'e0',
source: '0',
target: '1',
description: 'This is edge from node 0 to node 1.',
},
{
id: 'e1',
source: '0',
target: '2',
description: 'This is edge from node 0 to node 2.',
},
{
id: 'e2',
source: '0',
target: '3',
description: 'This is edge from node 0 to node 3.',
},
],
};
const tooltip = new G6.Tooltip({
offsetX: 10,
offsetY: 0,
// v4.2.1 起支持 fixToNode，tooltip 相对于节点固定位置
fixToNode: [1, 0],
// the types of items that allow the tooltip show up
// 允许出现 tooltip 的 item 类型
itemTypes: ['node', 'edge'],
// custom the tooltip's content
// 自定义 tooltip 内容
getContent: (e) => {
const outDiv = document.createElement('div');
outDiv.style.width = 'fit-content';
//outDiv.style.padding = '0px 0px 20px 0px';
outDiv.innerHTML = <h4>Custom Content</h4>
<ul>
<li>Type: ${e.item.getType()}</li>
</ul>
<ul>
<li>Label: ${e.item.getModel().label || e.item.getModel().id}</li>
</ul>;
return outDiv;
},
});
const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const graph = new G6.Graph({
container: 'container',
width,
height,
linkCenter: true,
plugins: [tooltip],
renderer: 'svg',
modes: {
default: ['drag-node'],
},
defaultNode: {
size: [80, 40],
type: 'rect',
},
defaultEdge: {
type: 'ibBaseEdge',
style: {
stroke: '#4EC888',
lineAppendWidth: 10, // 滑上边检测范围变大
},
},
});
graph.data(data);
graph.render();
graph.on('node:mouseenter', (e) => { graph.setItemState(e.item, 'active', true); }); graph.on('node:mouseleave', (e) => { graph.setItemState(e.item, 'active', false); }); graph.on('edge:mouseenter', (e) => { graph.setItemState(e.item, 'active', true); }); graph.on('edge:mouseleave', (e) => { graph.setItemState(e.item, 'active', false); });
if (typeof window !== 'undefined') window.onresize = () => { if (!graph || graph.get('destroyed')) return; if (!container || !container.scrollWidth || !container.scrollHeight) return; graph.changeSize(container.scrollWidth, container.scrollHeight); };
预期行为
lineAppendWidth正常
平台
- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox]
- G6 版本: [4.5.1 ... ]
屏幕截图或视频（可选）
No response
补充说明（可选）
No response
