antV G6: tooltip插件使用骚操作

场景一：当你使用了html节点，里面有几个子元素，你想要鼠标放到每个子元素里都显示不同的tooltip内容

• 解决方案总结
  • 通过dom事件监听鼠标在哪个元素
  • 手动触发tooltip的显示
  • 屏蔽原有的节点tooltip
• 代码

// g6图配置的node
node:{
    type:(d) => (d.c_nodes?'html':'rect'),  // 一个图可使用多种节点类型
    style:(d)=>{
        cosnt{ name，c_nodes} = d
        // 普通节点逻辑省略。。。
        
        // html节点
        const subTemp = c_nodes.map(
            item=> ` <div class='children' data-id="${item.name}">  // 设置data-id用在后面dom监听确定是那个节点。
                   {item.name}     
            </div>`
        )
    }
    
}

// g6图配置的plugins
plugins:[
{
    type:'tooltip',
    key:'my-tooltip', // 设置key方便后面控制
    getContent:(evt,items)=>{
        const { id,subid,nodeData} = evt.target
        if(['html节点1','html节点2'].includes(id) && !subid) return '' ; // 屏蔽原有节点tooltip
        const data = ['html节点1','html节点2'].includes(id)? nodeData:items[0]; // 子元素触发的tooltip,取手动传过来的数据渲染。
        
        return `<div>${data.name}</div>`  // 定制渲染的逻辑。
    },
    style:{  // 可这样定制容器的样式
        '.tooltip':{
            visibility:'hidden',  //设置.tooltip时，这个必须设置。
            background:'#000',
            color:'#fff'
        }
    }
}
]

// ....省略
await graph.render()  //render可以这样保证渲染完毕。
const tooltip = graph.getPluginInstance('my-tooltip')

//dom监听事件
const  container = document.querySelector('#draw-map') // g6绘画容器div
container.addEventListener('mouseOver',(e)=>{  // 点击事件一样
    const child = e.target.closest('.t-node .children') // 从鼠标当前的节点向外查最近的符合这个选择器的节点。
    if(child){
        const childId = child.dataset.id  // 取得当前节点的 data-id,以此来区分子元素
        if(childId && tooltip){
            // 模拟一个tooltip事件
            const mockEvent ={
                id:'html节点1', // 这个必须是存在的节点id
                type:'node',
                client:{x:e.clientX,y:e.clientY} // 显示的位置
                // 下面可以自己定制一些属性，通过  getContent:(evt,items)的 evt.target.取得
                subid:childId,  // 用这个属性区分是手动触发的tooltip
                nodeData{
                    name:childId
                    //....
                }
            }
            tooltip.show(mockEvent);  // 手动触发
        }
    }
})