Tooltip提供的shouldBegin函数

[Chloey61]

`import G6 from '@antv/g6';
import insertCss from 'insert-css';

// 我们用 insert-css 演示引入自定义样式
// 推荐将样式添加到自己的样式文件中
// 若拷贝官方代码，别忘了 npm install insert-css
// 我们用 insert-css 演示引入自定义样式
// 推荐将样式添加到自己的样式文件中
// 若拷贝官方代码，别忘了 npm install 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 and offsetY include the padding of the parent container
// offsetX 与 offsetY 需要加上父容器的 padding
offsetX: 16 + 10,
offsetY: 24 + 10,
// 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;
},
shouldBegin: (e) => {
const name = e.target.get('name');
// if (name != 'text-shape') {
// return false;
// }
console.log(name)
return name == 'text-shape'?true:false;
}
});
const width = document.getElementById('container').scrollWidth;
const height = document.getElementById('container').scrollHeight || 500;
const graph = new G6.Graph({
container: 'container',
width,
height,
linkCenter: true,
plugins: [tooltip],
modes: {
default: ['drag-node'],
},
defaultNode: {
size: [80, 40],
type: 'rect',
style: {
fill: '#DEE9FF',
stroke: '#5B8FF9',
},
},
defaultEdge: {
style: {
stroke: '#b5b5b5',
lineAppendWidth: 3,
},
},
});
graph.data(data);
graph.render();
`
https://g6.antv.vision/zh/examples/tool/tooltip#tooltipPlugin

shouldBegin函数
根据name判断true时 并不能显示

[Yanyan-Wang]

下个小版本修复