需求中经常需要实现鼠标滑动到节点时,可以提示出想要的信息
g6 是在 formatText()函数中 自定义的,我用的是angular框架,其他主流框架应该也差不多。
const graph = new G6.Graph({
container: 'mountNode', // String | HTMLElement,必须,在 Step 1 中创建的容器 id 或容器本身
width: 800, // Number,必须,图的宽度
height: 500, // Number,必须,图的高度
// 在 modes 属性中 写formatText方法
modes:{
default: ['drag-node', 'zoom-canvas', {
// 以下是自定义提示的重点
type: 'tooltip',
formatText: (data: any) => {
// data 对应后台返回对应节点的数据,根据需要做展示
return `<div>ID: ${data.id}</div>
<div>Name: ${data.name}</div>`
}
}
}
});