文章目录
前言
项目需求:使用antv G6 treegraph画的一棵树,要求每个节点鼠标hover上去的时候展示节点名称及权重
一、内置behavior:tooltip
1.与使用点击事件的behavior一样,同样是内置behavior,都在创建画布的modes中进行配置
const graph = new G6.TreeGraph({
//画布容器
container: container,
//宽高我在前面进行了统一配置
width,
height,
modes: {
default: [
//这里是我配置的画布拖动以及缩放
"drag-canvas",
"zoom-canvas",
//下面是配置tooltip
{
type: 'tooltip',
formatText(model) {
return `<ul>
<li>节点: ${model.indexName}(${model.score})</li>
</ul>
<ul>
<li>权重: ${model.weight || ""}</li>
</ul>`;
},
offset: 10,
},
],
},
});
二、插件tooltip
1.除了内置behavior的tooltip还可以采用插件的方式,自定义tooltip然后在创建画布时进行配置
代码如下(示例):
const tooltip = new G6.Tooltip({
offsetX: 10,
offsetY: 20,
// 允许出现 tooltip 的 item 类型
itemTypes: ['node']
// 自定义 tooltip 内容
getContent(e) {
const outDiv = document.createElement('div');
outDiv.style.width = 'fit-content';
outDiv.innerHTML = `
<ul>
<li>节点名称: ${e.item.getModel().indexName || e.item.getModel().id}</li>
</ul>
<ul>
<li>权重: ${e.item.getModel().weight || ""}</li>
</ul>`
return outDiv
},
});
2.配置tooltip插件
代码如下(示例):
const graph = new G6.TreeGraph({
//... 其他配置项
plugins: [tooltip], // 配置 Tooltip 插件
});
官网说G6 4.0以后会用插件形式代替内置behavior的tooltip。