vis.js网络拓扑图鼠标悬停/点击弹框,获取到当前节点的详情信息

我项目中需要鼠标悬停在节点和线上时,分别显示对应的详情,并且有点击的操作事件,所以简单的效果图如下:

vis.js网络拓扑图鼠标悬停/点击弹框,获取到当前节点的详情信息_第1张图片

官方文档中也有自带的悬停:https://ame.cool/pages/9f384a/#%E5%AE%8C%E6%95%B4%E9%85%8D%E7%BD%AE%E9%A1%B9%E9%A2%84%E8%A7%88

官方文档中看到的event事件,,只要数据中有title属性,设置了tooltipDelay,鼠标悬停在线和节点上时,就会显示对应的title值,但是我要的不是这种效果,所以看了文档的event事件------

官方文档中看到的event事件https://ame.cool/pages/2a4abd/#%E5%8D%95%E5%87%BB-click

看文档,只传了一个id,而且并不是每一个事件都有id,找了半天没有找到好的解决办法,后面我自己写了和方法,用id做点击和悬停时的比较,获取到当前节点的所有信息。这样就显示出来了,主要的几个操作点如下图:

vis.js网络拓扑图鼠标悬停/点击弹框,获取到当前节点的详情信息_第2张图片

vis.js网络拓扑图鼠标悬停/点击弹框,获取到当前节点的详情信息_第3张图片

 最后,完整代码如下:




    
    
    
    vis.js
    
    
    
    
    


 

 

 

你可能感兴趣的:(vis.js,vis.js鼠标悬停,vis.js点击弹框,vis.js鼠标悬停显示详情,vis.js节点悬停,vis.js线悬停)