原创

连线事件介绍

温馨提示:
本文最后更新于 2021年12月05日,已超过 165 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我

GraphVis可视化组件连线对象提供了基础的鼠标交互事件,如:点击、双击、移入、移出等事件,可以结合业务交互进行事件绑定,定义自己的鼠标操作响应功能,提高应用的交互性。

获取可视化连线对象

//获取所有连线对象 visGraph.links<br/>//例如查找一个可视化节点,给节点的输出连线添加点击事件,点击后,重新设置目标节点样式var node = visGraph.nodes.filter((node)=>{
     return node.label == '节点名称';
})[0];

//获取节点A的所有输出连线,绑定事件
(node.outLinks||[]).forEach(function(link){

  //连线绑定点击事件
  link.click(function(event){
      this.target.borderWidth=10;
      this.target.borderColor='255,0,0';
  });

  //连线绑定双击事件
  link.dbclick(function(event){
      console.log('双击了连线');
  });
});

连线事件的说明

事件类型

事件名称

使用示例

click

鼠标点击事件

link.click(function(event){})

dbclick

鼠标的双击事件

link.dbclick(function(event){})

mouseup

鼠标弹起事件

link.mouseup(function(event){})

mousedown

鼠标按下事件

link.mousedown(function(event){})

正文到此结束