四、 事件监听:visjs事件监听

最新推荐文章于 2023-09-09 16:02:23 发布
最新推荐文章于 2023-09-09 16:02:23 发布
阅读量838 收藏
点赞数
分类专栏： visjs 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YouZi_X/article/details/126931770
版权 
let container = document.getElementById("mynetwork");
    let data = {
        nodes: this.nodes,
        edges: this.edges,
    };
    let options = {interaction: { hover: true }};

    network = new vis.Network(container, data, options);
    // 事件监听
    this.networkEvent();
},

// 拓扑网络监听事件
networkEvent() {
    //单击
    network.on("click", (e) => {});

    // 双击
    network.on("doubleClick", (e) => {});

    // 单击鼠标右键
    network.on("oncontext", (e) => {});

    // 节点悬停
    network.on("hoverNode", (e) => {});

    // 节点失焦
    network.on("blurNode", (e) => {});

    // 边悬停
    network.on("hoverEdge", (e) => {});

    // 边失焦
    network.on("blurEdge", (e) => {});

    //  鼠标拖动开始事件
    network.on("dragStart", (e) => {});
    
    //  鼠标拖动结束事件
    network.on("dragEnd", (e) => {});
    
    //  鼠标缩放事件
    network.on("zoom", (e) => {});
    //...
}

例：展开&收缩节点

需求：展开节点，收缩节点，收缩展开过的节点光晕颜色改变（区别未展开过的节点）

DataSet Methods
新增节点/边：nodes.add({…})，edges.add({…})
删除节点/边：nodes.remove({…}),edges.remove({…})


<template>
  <div id="mynetwork" class="mynetwork2"></div>
</template>

<script>
const vis = require("vis-network/dist/vis-network.min.js");
import _ from "lodash";

var network = null;
export default {
  data() {
    return {
      //创建节点对象
      nodes: new vis.DataSet([
        {
          id: "node-1",
          label: "Node 1",
          title: "1111",
          image: {
            selected: require("@/assets/people-opened.png"),
            unselected: require("@/assets/people-def.png"),
          },
        },
      ]),
      //创建连线对象
      edges: new vis.DataSet([
        // { id: "edge-1", from: "node-1", to: "node-2" },
      ]),
      removeNodes: [],
      removeEdges: [],
    };
  },
  mounted() {
    this.initNetwork();
  },
  methods: {
    // 初始化网络拓扑
    initNetwork() {
      let container = document.getElementById("mynetwork");
      let data = {
        nodes: this.nodes,
        edges: this.edges,
      };
      let options = {
        interaction: {
          hover: true,
        },
        layout: {
          randomSeed: 2, //配置每次生成的节点位置都一样，参数为数字1、2等
        },
        nodes: {
          // shape: "dot",
          // shape: "circularImage",
          // borderWidth: 2,
          shape: "image",
          size: 23,
          color: {
            // border: "rgba(255, 255, 255, 1)",
            background: "rgba(102, 51, 255, 1)",
          },
          font: {
            // color: "#fff",
          },
          shadow: {
            enabled: true,
            // color: "rgba(153, 102, 204, 1)",
            color: "rgba(153, 0, 204, 1)",
            size: 40,
            x: 0,
            y: 0,
          },
          chosen: {
            label: false,
            // node: function(values, id, selected, hovering) {
            node: function(values) {
              values.shadowColor = "rgba(255, 215, 0, 0.8)";
            },
          },
          // shapeProperties: {
          //     borderDashes: [5, 15],
          // },
        },
        edges: {
          hoverWidth: 0,
          shadow: true,
          arrows: {
            to: {
              enabled: true,
              type: "arrow",
            },
          },
          color: {
            color: "#525A81",
            highlight: "#FFBA30",
            hover: "#FFBA30",
            // inherit: "from",
            opacity: 1.0,
          },
          font: {
            // color: "#fff",
            size: 12, // px
            strokeWidth: 0, // px
          },
        },
        physics: {
          enabled: true,
          // minVelocity: 1 //(default: 1)一旦达到所有节点的最小速度，我们假设网络已经稳定，布局停止。
          timestep: 0.2,
          // wind: {
          //   x: 10,
          //   y: 10
          // }
        },
      };
      network = new vis.Network(container, data, options);
      // 事件监听
      this.networkEvent();
    },
    // 拓扑网络监听事件
    networkEvent() {
      // 单击
      network.on("click", (e) => {
        console.log("单击：", e);
        console.log(this.edges.get(e.edges[0]));
        // 只有在点击节点时才进行节点的增删
        if (!e.nodes.length) {
          return false;
        }
        var clickNodeList = this.nodes.get(e.nodes[0]);
        console.log(clickNodeList);
        if (!clickNodeList.open) {
          // 恢复过滤数据
          // this.recoverFilterData();
          this.generateData(e.nodes[0], e.edges[0], e.nodes[0]);
          // 判断是否有子节点
          let haschildState = network.getConnectedNodes(e.nodes[0], "to").length ? true : false;
          this.nodes.update({
            id: e.nodes[0],
            open: true,
            haschildren: haschildState,
            changEdge: e.edges[0],
          });
          if (e.edges[0]) {
            this.edges.update({
              id: e.edges[0],
              open: true,
              haschildren: haschildState,
              // length: 600,
            });
          }
          // 移动焦点到视图中心
          // 双击某一节点，画布放大至1:1比例，当前节点处于画布中心位置
          var option = {
            scale: 1.0,
            offset: { x: 0, y: 0 },
            animation: {
              duration: 1000,
              easingFunction: "easeInOutQuad",
            },
          };
          network.focus(e.nodes[0], option);
        } else {
          // 获取该节点下 未展开的节点的集合 和 从该节点发出的到未展开节点线的集合
          let nodeItems = this.nodes.get({
            filter: function(item) {
              return item.parentId === e.nodes[0] && !item.open && !item.haschildren;
            },
          });
          // console.log("nodeItems", nodeItems);
          let edgesItem = this.edges.get({
            filter: function(item) {
              return (
                !item.open && item.from == e.nodes[0] && !item.haschildren
                // (item.to == e.nodes[0] || item.from == e.nodes[0])
              );
            },
          });
          console.log("edgesItem", edgesItem);
          // 需求： 只缩进当前节点一度关系中未展开的节点，一度关系点已展开关系的不缩进
          // 缩进（ 删除未展开子节点和子节点连线）
          // this.addNew(this.removeNodes, nodeItems);
          // this.addNew(this.removeEdges, edgesItem);
          this.nodes.remove(nodeItems);
          this.edges.remove(edgesItem);
          // 判断是否有子节点
          let haschildState = network.getConnectedNodes(e.nodes[0], "to").length ? true : false;
          this.nodes.update({
            id: e.nodes[0],
            open: false,
            shadow: {
              // color: "rgba(166, 26, 120, 1)",
              color: "rgba(81, 0, 255, 1)",
            },
            image: {
              selected: require("@/assets/people-opened.png"),
              unselected: require("@/assets/people-def.png"),
            },
            // clickNodeList.image.selected || clickNodeList.image, //已修改后的字段为image
            haschildren: haschildState,
          });
          if (clickNodeList.changEdge) {
            // 初始中心节点无changEdge
            this.edges.update({
              id: clickNodeList.changEdge,
              open: false,
              haschildren: haschildState,
              // length: 280,
            });
          }
        }
      });
    },
    generateData(nodename, edgename, orgnode) {
      var len = 2;
      let nodes = [];
      let edges = [];
      let nodeName = nodename || "node";
      let edgeName = edgename || "edge";
      const relation = ["诈骗","父亲","母亲","哥哥","姐姐","同事","定向扩展","妻子","弟弟",];
      const labelType = ["people", "car", "phone", "qq", "wx", "email"];
      for (var i = 1; i <= len; i++) {
        const randomIndex = Math.floor(Math.random() * 6);
        nodes.push({
          parentId: orgnode,
          id: nodeName + "-" + i,
          label: labelType[randomIndex],
          shape: "image",
          image: {
            selected: require("@/assets/people-opened.png"),
            unselected: require("@/assets/people-def.png"),
          },
          haschildren: false,
        });
        edges.push({
          id: edgeName + "-" + i,
          from: orgnode || "node-1",
          to: nodeName + "-" + i,
          label: relation[Math.floor(Math.random() * 10)],
          haschildren: false,
        });
      }
      // 避免添加重复数据导致错误
      this.buildData(nodes, edges);
    },
    // 构建数据
    buildNode(nodes) {
      nodes.forEach((item) => {
        // var node = {
        // ...
        //};
        this.nodes.add(item);
      });
      // console.log("---------", this.nodes.get());
    },
    buildEdge(edges) {
      edges.forEach((item) => {
        // var edge = {
        //  ...
        // };
        this.edges.add(item);
      });
    },
    buildData(n, e) {
      // 去重
      // console.log(this.nodes.get());
      // 删除n中与第二个数组对象id相同的值
      let differenceN = _.differenceBy(n, this.nodes.get(), "id");
      let differenceE = _.differenceBy(e, this.edges.get(), "id");
      // console.log("differenceN:", differenceN, differenceE);
      this.buildNode(differenceN);
      this.buildEdge(differenceE);
    },
    addNew(arr, newarr) {
      for (const item of newarr) {
        arr.push(item);
      }
    },
    recoverFilterData() {
      // console.log("reset:", this.removeNodes);
      // console.log("reset:", this.removeEdges);
    },
  },
};
</script>

<style scoped>
.mynetwork2 {
  height: 100%;
  /* background-color: #2a004a; */
}
</style>

效果如下
在这里插入图片描述

功能点：

右键展开菜单，点击请求节点数据，或展开下级菜单

拖动节点或画布，菜单跟随节点

缩放画布，菜单同步缩放

对其它或者空白区域进行操作时，关闭菜单

一、visjs的安装及简单使用

二、 配置项

三、 公共API

四、 事件监听+例子

五、自定义右键菜单

YouZi_X
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
visjs节点之间关系不展示
高山景行，一尘不染
04-12 1183
节点多要150的时候，节点之间的关系不展示 官网：http://visjs.org/docs/network/layout.html# 配置： let options = { edges: { shadow: true, //连接线阴影配置 smooth: true, //是否显示方向箭头 arrows:...
vis.js绘制网络拓扑图，并且鼠标移上去会有显示效果
donghuzi1
06-02 748
<!DOCTYPE html> <!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!--> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF8" /> <title> .
vis.js力导向图第二弹——固定节点
toBeMN的博客
11-16 4662
正经学徒，佛系记录，不搞事情 基于上文：https://blog.csdn.net/qq_31748587/article/details/84142527 的项目 力导向图由于力的作用，导致即使平衡后，拖拽节点依然会导致所有节点重新回到平衡状态，当数据量足够大时，甚至会出现遮挡、拖拽后节点弹到别的地方等问题 为了使vis既能保持力导向图的效果，又能在拖拽节点后节点可以固定不动 这里设计了...
vis.js网络拓扑图鼠标悬停/点击弹框，获取到当前节点的详情信息
笑到世界都狼狈的博客
09-10 4624
我项目中需要鼠标悬停在节点和线上时，分别显示对应的详情，并且有点击的操作事件，所以简单的效果图如下： 官方文档中看到的event事件https://ame.cool/pages/2a4abd/#%E5%8D%95%E5%87%BB-click 看文档，只传了一个id,而且并不是每一个事件都有id,找了半天没有找到好的解决办法，后面我自己写了和方法，用id做点击和悬停时的比较，获取到当前节点的所有信息。这样就显示出来了，主要的几个操作点如下图： 最后，完整代码如下： <!d..
vis.js的研究之路
呼叫冰河谷博客
03-21 1216
把vis.js官网的知识点(我自己用到的)按照自己的理解做一个总结 1.最基本的线路图 <!doctype html> <html> <head> <title>Network | Basic usage</title> <script type="text/javascript" src="./plugins/...
vis---network常用事件
maidu_xbd的博客
08-09 2565
vis network常用事件包括 事件 描述 click 单击鼠标触发 doubleClick 双击鼠标触发 hold 单击并按住鼠标触发 oncontext 鼠标右键单击触发 hoverNode 鼠标悬停在节点上触发 hoverEdge .
事件监听器-EditText的事件监听
最新发布
01-13
接着，我们简要介绍其他几种事件监听： 1. RadioGroup和RadioButton的事件监听使用`OnCheckedChangeListener`。当用户选择或取消选择一个RadioButton时，可以通过设置RadioGroup的监听器来获取用户的选择状态。例如...
Java添加事件监听的四种方法代码实例
09-04
本文将详细介绍Java中添加事件监听的四种方法，并通过代码实例进行说明。 ### 1. 实现监听器接口 第一种方法是让类直接实现特定的监听器接口。例如，`ActionListener` 接口用于处理动作事件，如按钮点击。以下是一...
深入探索Spring事件监听机制：技术与应用
12-13
在Spring中，事件监听机制由三部分组成：事件（ApplicationEvent）、事件监听器（ApplicationListener）和事件广播器（ApplicationEventMulticaster）。接下来我们将深入探讨这些概念以及如何在实际应用中使用它们。...
C#自定义事件监听实现方法
09-03
事件监听允许一个对象（订阅者）关注另一个对象（发布者）的状态变化，并在特定事件发生时执行相应操作。本篇将详细讲解如何在C#中实现自定义事件监听。 首先，我们要了解C#事件的基本结构。事件是基于委托的，委托...
vue 实现移动端键盘搜索事件监听
12-13
2、监听keypress事件 （1）KeyDown、KeyUp 事件 这些事件是当一个对象具有焦点时按下 ( KeyDown ) 或松开 ( KeyUp ) 一个键时发生的。（要解释 ANSI 字符，应使用 KeyPress 事件。） （2）KeyPress 事件 此事件当...
vue3 vis-timeline
qq_40734853的博客
09-09 833
new DataSet([数据])----渲染数据。
悬浮hover之后没反应的解决方法
weixin_44135963的博客
08-17 1329
使用:hover 比如 .one:hover a { background-color : red } a标签的选择器必须为 .one子代的名字，不可从父代选择到a 比如 %%%%%%%%%% %%%%%%%%%% %%%%%%%%%% %%%%%%%%%%% .one>div : hover a{ background-color:red } 此时的a不可用 .one>div>a进行选择 ...
vue3.0+vis.js网络拓扑图点击节点的展开与收缩
小兔崽子的博客
05-28 3759
1.npm安装vis.js npm install vis 2.在页面引入vis的DataSet import { DataSet, Network } from "vis";
五、vis 右键节点展开菜单
YouZi_X的博客
09-17 1375
1. 右键展开菜单，点击请求节点数据，或展开下级菜单 2. 拖动节点或画布，菜单跟随节点 3. 缩放画布，菜单同步缩放 4. 对其它或者空白区域进行操作时，关闭菜单
chromedp网络监听_动态爬虫三：监听网络事件 + 监听js事件
weixin_34026997的博客
12-25 4627
一： 概述 上两篇文章介绍了cdp协议和chromedp库，从这篇文章开始动手实战一下，我们要拿到页面上更多的网络请求，最直接的想法就是类似于开发者工具里的network，只有一有网络请求就显示在列表里(在network里隐藏的网络请求后续讨论)，完后页面加载完后就可以浏览页面操作页面了，比如 点击，滑动等等，这些都是 js 的事件，如果能把所有绑定了事件的元素都找到， 再去...
vis.js网络拓扑图点击折叠节点和展开节点
笑到世界都狼狈的博客
09-11 4986
首先看一下效果图： 1.数据中要添加的属性如下图所示： 2.数据中添加入上图属性后，添加点击事件即可，代码如下： //todo 双击时折叠和展开 network.on("doubleClick", function(params) {//双击事件 if (params.nodes.length != 0) {//确定为节点双击事件 var click_node_id = params.nodes[0]; remove_a
vis-network节点展开收缩问题(大坑)
weixin_47359038的博客
07-22 993
同事开发拓扑组件时，碰到一个谜题，让我解决一下。在拓扑节点展开收缩时，收缩是正常的，而在节点展开时，拓扑节点渲染的不正常，节点的label不更新。节点收缩前的lable值各不相同。
vis.js 自定义右键功能
xiangcaoyihan的专栏
07-15 2258
最近工作中接触到vis.js，使用了他的network功能，感觉与D3有点儿像，但是操作起来要比D3方便，以下是我的使用随笔。 前期准备 1.下载vis.js （https://almende.github.io/vis） 2.vue.js（我的前台使用的 Vue + ElementUI） HTML页面 首先新建一个topo.html页面，引入vis.js，vue.js等 <!DOCTYPE html> <html lang="zh-CN"> <head> <met
.按钮事件监听 功能：按钮事件监听
03-27
按钮事件监听是指在用户点击按钮时，程序能够捕捉到该事件，并执行相应的操作。在开发界面交互性较强的应用程序时，通常需要使用按钮事件监听来实现用户与程序之间的交互。具体实现方式有多种，例如在按钮上添加点击事件监听器，或者使用响应式编程框架中的观察者模式等。 在Java Swing中，可以使用ActionListener接口来实现按钮事件监听。下面是一个简单的示例代码： ``` import javax.swing.*; import java.awt.event.*; public class ButtonListener implements ActionListener { public void actionPerformed(ActionEvent e) { JOptionPane.showMessageDialog(null, "Button clicked!"); } } public class Main { public static void main(String[] args) { JFrame frame = new JFrame("Button Listener Example"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); JButton button = new JButton("Click me!"); button.addActionListener(new ButtonListener()); frame.getContentPane().add(button); frame.pack(); frame.setVisible(true); } } ``` 在上面的代码中，我们创建了一个JButton和一个实现了ActionListener接口的ButtonListener类。当用户点击按钮时，程序会调用ButtonListener类的actionPerformed方法，并在对话框中显示一个消息。最后，我们将按钮添加到窗口中，并显示窗口。 除了Java Swing之外，其他GUI框架也都提供了类似的事件监听机制，开发人员可以根据具体需要选择相应的实现方式。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值