vue使用Vis.Network制作图谱

最新推荐文章于 2024-05-28 10:04:05 发布
最新推荐文章于 2024-05-28 10:04:05 发布
阅读量1.4k 收藏 8
点赞数 4
文章标签： javascript html vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45289656/article/details/119320818
版权

首先要加载vis

npm install vis --save

需要使用的组件中引入

import Vis from "vis";

初始化图谱

<!--width,height 画布的宽度，高度。 可以是百分比或像素，一般在dom元素上设置 -->
    <div id="network_id" class="network" style="height: 500px;"></div>
data() {
	return {
		nodesArray: [],  //节点数组
		edgesArray: []  //关系线数组
	}
},
mounted() {
      // 初始化
      let container = document.getElementById("network_id");
       let data = { nodes: this.nodesArray, edges: this.edgesArray }
       let options = {
          autoResize: true, //网络将自动检测其容器的大小调整，并相应地重绘自身
          locale: "cn", //语言设置：工具栏显示中文
          // 设置节点样式
          nodes: {
            shape: "dot", //节点的外观。为circle时label显示在节点内，为dot时label显示在节点下方
            margin: 5, //当形状设置为box、circle、database、icon、text；label的边距
            widthConstraint: 100, //设置数字，将节点的最小和最大宽度设为该值,当值设为很小的时候，label会换行，节点会保持一个最小值，里边的内容会换行
            borderWidth: 1, //节点边框宽度，单位为px
            borderWidthSelected: 3, //节点被选中时边框的宽度，单位为px
            labelHighlightBold: false, //确定选择节点时标签是否变为粗体
          },
          // 边线配置
          edges: {
            width: 1,
            length: 200,
            arrows: { to: true }, //箭头指向to
          },
          interaction: {
            hover: true,
            hoverConnectedEdges: true
          },
          //计算节点之前斥力，进行自动排列的属性
          physics: {
            enabled: true, //默认是true，设置为false后，节点将不会自动改变，拖动谁谁动。不影响其他的节点
            maxVelocity: 20,
            minVelocity: 0.1
          }
        };
      let network = new Vis.Network(container, data, options);
    },

完整代码

<template>
  <div class="Vis">
    <!--width,height 画布的宽度，高度。 可以是百分比或像素，一般在dom元素上设置 -->
    <div id="network_id" class="network" style="height: 500px;"></div>
    <!--节点悬停-->
    <div class="menu" id="divHoverNode" style="display:none;"></div>
  </div>
</template>
<script>
  import Vis from "vis";
  export default {
    data() {
      return {
        //   节点数组
        nodesArray: [
          {
            "type": "Project",
            "label": "kernel_git_pcmoore_selinux",
            "id": 3559072,
            "releaseTime": "2006-08-22 12:00:00",
            "licenses": [
              "GPL-2.0",
              "GPL"
            ],
            "copyrights": [
              {
                "context": "Copyright (C) 1989, 1991 Free Software Foundation, Inc.",
                "time": "1989, 1991",
                "author": "Free Software Foundation, Inc.",
                "integrity": 3
              },
              {
                "context": "copyrighted by the Free Software",
                "time": null,
                "author": "Free Software",
                "integrity": 2
              }
            ],
            "version": "v2.6.17.10",
            "selfCompatibleRiskFlag": 0,
            "selfComplianceRiskFlag": 1
          },
          {
            "type": "File",
            "label": "e1000_hw.h",
            "id": 1774161,
            "licenses": [
              "GPL-2.0-or-later"
            ],
            "copyrights": [
              {
                "context": "(c) 1999 - 2005 Intel Corporation. All rights reserved.",
                "time": "1999 - 2005",
                "author": "Intel Corporation",
                "integrity": 3
              }
            ],
            "isStrongInfection": 1,
            "selfCompatibleRisk": [

            ]
          },
          {
            "type": "File",
            "label": "e1000_hw.h",
            "id": 1774156,
            "licenses": [
              "GPL-2.0-or-later"
            ],
            "copyrights": [
              {
                "context": "(c) 1999 - 2006 Intel Corporation. All rights reserved.",
                "time": "1999 - 2006",
                "author": "Intel Corporation",
                "integrity": 3
              }
            ],
            "isStrongInfection": 1,
            "selfCompatibleRisk": [

            ]
          },
          {
            "type": "File",
            "label": "sm_statefuns.c",
            "id": 1395911,
            "licenses": [
              "GPL-2.0-or-later"
            ],
            "copyrights": [
              {
                "context": "Copyright IBM Corp. 2001, 2004",
                "time": "2001, 2004",
                "author": "IBM Corp",
                "integrity": 3
              }
            ],
            "isStrongInfection": 1,
            "selfCompatibleRisk": [

            ]
          },
          {
            "type": "Project",
            "label": "kernel_git_tytso_fscrypt",
            "id": 3559116,
            "releaseTime": "2006-08-22 12:00:00",
            "licenses": [
              "GPL-2.0",
              "GPL"
            ],
            "copyrights": [
              {
                "context": "Copyright (C) 1989, 1991 Free Software Foundation, Inc.",
                "time": "1989, 1991",
                "author": "Free Software Foundation, Inc.",
                "integrity": 3
              }
            ],
            "version": "v2.6.17.10",
            "selfCompatibleRiskFlag": 0,
            "selfComplianceRiskFlag": 1
          },
          {
            "type": "File",
            "label": "skbuff.c",
            "id": 3334544,
            "licenses": [
              "GPL-2.0-or-later"
            ],
            "copyrights": [

            ],
            "isStrongInfection": 1,
            "selfCompatibleRisk": [

            ]
          }
        ],
        //   关系线数组
        edgesArray:
          [
            {
              "from": 1774161,
              "label": "MATCH",
              "to": 1774156,
              "id": 5967581,
              "type": 2,
              "rlf": 0,
              "rcf": 1,
              "cf": 0
            },
            {
              "from": 3559116,
              "label": "CONTAIN",
              "to": 1395911,
              "id": 9763072,
              "type": 0
            },
            {
              "from": 3559116,
              "label": "CONTAIN",
              "to": 1774161,
              "id": 9763079,
              "type": 0
            },
            {
              "from": 3559116,
              "label": "MATCH",
              "to": 3559072,
              "id": 9763085,
              "type": 1,
              "proportion": 0,
              "directionFlag": 0,
              "noDirectionFlag": 0,
              "complianceFlag": 1
            },
            {
              "from": 3559116,
              "label": "CONTAIN",
              "to": 3334544,
              "id": 9763082,
              "type": 0
            }
          ],
      };
    },
    mounted() {
      // 初始化
      this.init();
    },
    methods: {
      //初始化
      init() {
        let container = document.getElementById("network_id");
        this.nodesArray.forEach(i => {
          if (i.type == 'File') {  // 文件
            i.color = "#CAF982"
          } else {  // 项目
            i.color = "#D9001B"
          }
        })
        let data = { nodes: this.nodesArray, edges: this.edgesArray }
        let options = {
          autoResize: true, //网络将自动检测其容器的大小调整，并相应地重绘自身
          locale: "cn", //语言设置：工具栏显示中文
          // 设置节点样式
          nodes: {
            shape: "dot", //节点的外观。为circle时label显示在节点内，为dot时label显示在节点下方
            size: 30, //节点的大小，
            shadow: false, //如果为true，则节点使用默认设置投射阴影。
            font: {
              //字体配置
              size: 20,
              color: "rgb(117, 218, 167)",
              align: "center",
            },
            color: {
              border: "transparent", //节点边框颜色
              background: "#ffc7c7", //节点背景颜色
              highlight: {
                //节点选中时状态颜色
                border: "rgb(117, 218, 167)",
                background: "rgb(117, 218, 167)",
              },
              hover: {
                //节点鼠标滑过时状态颜色
                border: "#dff9fb",
                background: "#88dab1",
              },
            },
            margin: 5, //当形状设置为box、circle、database、icon、text；label的边距
            widthConstraint: 100, //设置数字，将节点的最小和最大宽度设为该值,当值设为很小的时候，label会换行，节点会保持一个最小值，里边的内容会换行
            borderWidth: 1, //节点边框宽度，单位为px
            borderWidthSelected: 3, //节点被选中时边框的宽度，单位为px
            labelHighlightBold: false, //确定选择节点时标签是否变为粗体
          },
          // 边线配置
          edges: {
            width: 1,
            length: 200,
            color: {
              color: "#848499",
              highlight: "rgb(117, 218, 167)",
              hover: "#88dab1",
              inherit: "from",
              opacity: 1.0,
            },
            smooth: {
              //设置两个节点之前的连线的状态
              enabled: true, //默认是true，设置为false之后，两个节点之前的连线始终为直线，不会出现贝塞尔曲线
            },
            arrows: { to: true }, //箭头指向to
          },
          interaction: {
            hover: true,
            hoverConnectedEdges: true
          },
          //计算节点之前斥力，进行自动排列的属性
          physics: {
            enabled: true, //默认是true，设置为false后，节点将不会自动改变，拖动谁谁动。不影响其他的节点
            barnesHut: {
              gravitationalConstant: -4000,
              centralGravity: 0.3,
              springLength: 120,
              springConstant: 0.04,
              damping: 0.09,
              avoidOverlap: 0,
            },
            maxVelocity: 20,
            minVelocity: 0.1
          },
          //用于所有用户与网络的交互。处理鼠标和触摸事件以及导航按钮和弹出窗口
          // interaction: {
          //   hover: true,
          //   dragNodes: true, //是否能拖动节点
          //   dragView: true, //是否能拖动画布
          //   hover: true, //鼠标移过后加粗该节点和连接线
          //   multiselect: true, //按 ctrl 多选
          //   selectable: true, //是否可以点击选择
          //   selectConnectedEdges: true, //选择节点后是否显示连接线
          //   hoverConnectedEdges: true, //鼠标滑动节点后是否显示连接线
          //   zoomView: true, //是否能缩放画布
          // },
          //操作模块:包括 添加、删除、获取选中点、设置选中点、拖拽系列、点击等等
          // manipulation: {
          //   enabled: true, //该属性表示可以编辑，出现编辑操作按钮
          //   addNode: true,
          //   addEdge: true,
          //   // editNode: undefined,
          //   editEdge: true,
          //   deleteNode: true,
          //   deleteEdge: true,
          // },
        };
        let network = new Vis.Network(container, data, options);
        // 鼠标点击事件
        network.on("click", (e) => {
          // 通过nodes：[],来判断是节点还是线
          // 如果nodes是空则是线，反之则是节点
          if (e.nodes.length != 0) {
            // param.nodes  节点
          } else {
            // param.edges   线
          }
        })

        //todo  悬停在节点上--显示弹框
        network.on("hoverNode", (e) => {
          let c = ''
          data.nodes.forEach(i => {
            if (i.id == e.node) {
              c = i
            }
          })
          let copyrights = ''  // 版   权
          if (c.copyrights.length != 0) {
            c.copyrights.forEach(i => {
              copyrights += i.context
            })
          }
          var ul = ''
          if (c.type == 'File') {  // 文件
            ul = "<ul>"
              + "<li>协   议：" + c.licenses.toString() + "</li>"
              + "<li>版   权：" + copyrights + "</li>"
              + "<li>" + (c.isStrongInfection == 1 ? '有' : '没有') + "著作权协议</li>"
              + "</ul>";
          } else {   // 项目
            ul = "<ul>"
              + "<li>项目名称：" + c.label + "</li>"
              + "<li>版   本：" + c.version + "</li>"
              + "<li>发布时间：" + c.releaseTime + "</li>"
              + "<li>协   议：" + c.licenses.toString() + "</li>"
              + "<li>版   权：" + copyrights + "</li>"
              + "</ul>";
          }
          // js
          let divHoverNode = document.getElementById("divHoverNode")
          divHoverNode.innerHTML = ul
          divHoverNode.style = `display:block;left: ${e.event.offsetX + 15}px;top: ${e.event.offsetY + 15}px`
          // jQuery
          // $("#divHoverNode").append(ul);
          // $('#divHoverNode').css({
          //   'display': 'block',
          //   'left': e.event.offsetX + 15,
          //   'top': e.event.offsetY + 15
          // });
        });
        //todo  从节点移开---隐藏弹框
        network.on('blurNode', () => {
          // js
          let divHoverNode = document.getElementById("divHoverNode")
          divHoverNode.innerHTML = ''
          divHoverNode.style = `display:none;`
          // jQuery
          // $("#divHoverNode").hide();
          // $("#divHoverNode").empty();//移除之后清空div
        });
        // 拖拽节点
        network.on("dragEnd", (e) => {
          if (e.nodes && e.nodes.length > 0) {
            // 拖拽节点后,使得节点可以固定不动
            network.clustering.updateClusteredNode(e.nodes[0], {
              physics: false,
            });
          }
        });
      },
    },
  };
</script>
<style lang="scss">
  .Vis {
    position: relative;
  }

  .menu {
    /*这个样式不写，右键弹框会一直显示在画布的左下角*/
    position: absolute;
    background: rgba(3, 3, 3, 0.6);
    border-radius: 5px;
    left: -99999px;
    top: -999999px;
    color: #fff;
    padding: 5px;
  }
</style>
小疯仔
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【开源宝鉴】Vue2vis：让Vis.js在Vue世界中舞动！
gitblog_00087的博客
05-30 464
【开源宝鉴】Vue2vis：让Vis.js在Vue世界中舞动！ 项目地址:https://gitcode.com/alexcode/vue2vis 项目介绍 Vue2vis，一个轻巧而强大的Vue.js库，专为将业界知名的Vis.js图形库无缝融入Vue应用而设计。如果你正寻找将动态数据可视化提升到新高度的解决方案，那么，Vue2vis正是你的理想之选。通过这个单体仓库，开发者能够轻松地利用Vis...
vue 集成 vis-network 实现网络拓扑图的方法
12-11
vis.js  网站 https://visjs.org/ vs  code 下安装命令 npm install vis-network 在vue  下引入 vis-network组件 const vis = require("vis-network/dist/vis-network.min.js"); require("vis-network/dist/vis-network.min.css"); 例子代码使用 let DIR = "/jtopo/"; let nodes = [ { id: 1, shape: "circularImage", image: DIR + "server
Vue关系图谱组件
最新发布
weixin_57761373的博客
05-28 520
Vue 关系图谱组件是基于 Vue.js 框架开发的一种组件，用于展示数据之间的关系。它通常采用图形化的方式，将数据以节点和边的形式呈现出来，帮助用户直观地理解数据之间的联系和结构。通过本文的介绍，你应该对 Vue 关系图谱组件有了基本的了解。它是一种强大的工具，可以帮助我们更好地展示和理解数据之间的关系，为前端开发提供了更多的可能性和灵活性。
Vue 使用 vis-network 绘制网络关系图
共勉
04-20 8776
visjs 提供了一个网络视图模块，提供给我们绘制网络之间的各个点、线之间的关系，这个的话就比较类似于echarts的地图，在地图上打点画线的逻辑，区别在于使用visjs可以拖动节点的位置、以及visjs里面还有对物理引擎等的引入。 网络是一种可视化，用于显示由节点和边组成的网络和网络。可视化易于使用，并支持自定义形状、样式、颜色、大小、图像等。网络可视化可在任何现代浏览器上流畅运行，最多可容纳数千个节点和边。为了处理大量节点，Network 支持集群。
vue2使用 vis-network 和 vue-vis-network 插件封装一个公用的关联关系图
章小鱼的博客
08-29 1404
【代码】vue2使用 vis-network 和 vue-vis-network 插件封装一个公用的关联关系图。
【vue3】使用vis-network绘制网络关系图失效问题
amazinglingling的博客
10-13 558
入门network，导入出错
基于Neo4j+springboot+vue+d3.js知识图谱构建和可视化
05-09
在这个项目中，我们结合了Neo4j数据库、Spring Boot后端框架、Vue.js前端库以及d3.js数据可视化库，来构建和可视化知识图谱。下面将详细阐述各个组件在知识图谱构建中的作用和相关技术要点。 **Neo4j** 是一个高...
前端-Vue3.x-知识图谱
02-19
Vue3.x是Vue.js框架的最新版本，它在性能、API设计、响应式系统等多个方面进行了重大改进，为开发者带来了更高效、更灵活的开发体验。这份“前端-Vue3.x-知识图谱”旨在全面概述Vue3.x的核心概念、特性和最佳实践。 ...
vue使用recorder.js实现录音功能
10-15
以下是如何在Vue中集成并使用recorder.js的详细步骤： 1. **引入外部JS文件**： 首先，你需要将HZRecorder.js文件引入到你的Vue项目中。这可以通过`import`语句完成，例如： ```javascript import { HZRecorder ...
Neo4j+springboot+vue+d3.js知识图谱构建和可视化
01-17
在构建和可视化知识图谱的过程中，我们通常会...以上就是使用Neo4j、SpringBoot、Vue.js和d3.js构建知识图谱及可视化的关键知识点，它们共同作用，形成一个完整的知识图谱系统，能够有效地管理和展示复杂的关系数据。
vue-vis-network:Vue 2与https集成
05-08
虚拟网络 !!! 笔记 ！！！ 嗨，开发人员。 如果您发现错误或提出改进/功能，请为该项目做出贡献。 因为这些天我非常非常忙碌，而且在接下来的2-4个月内都不会结束。 希望你能比我做得更快） Vue2组件与视图集成 最好了解 ，这是此组件的基础。 这个项目可能有一些来自问题 安装 npm install --save vis-util vis-data vis-network vue-vis-network 或者 yarn add vis-util vis-data vis-network vue-vis-network 用法 声明组件 import { Network } from "vue-vis-network" ; Vue . component ( 'network' , Network ) ; 在模板中添加组件。 < body > < div id =" app "
vue学习图谱.rar
11-13
30张脑图带你从零开始学VUE，值得收藏,所有知识点,很好很强大,转https://www.cnblogs.com/chengxuyuanaa/p/13171580.html
vue知识图谱.xmind
03-31
一张图带你了解整个xue全家桶相关。包括vue、vue-router、vuex、webpack、浏览器相关等所有vue全家桶相关知识点。
vue-d3-graph:vue+d3v6实现动态知识图谱可视化展示（包含2D和3D图谱展示）
07-09
博客地址：https://blog.csdn.net/tiandao451/article/details/109708427 由于发现在我的博客通过点击GitHub链接，会跳转到别人盗用的下载地址，而且还是VIP收费，所以自己把代码上传CSDN资源上。 【因为缺分，所以收5个积分，免费可以到Github上下载最新的代码】
vue使用relation-graph实现关系图谱
@必意玲
09-20 1641
这是一个Vue关系图谱组件，可以展示如组织机构图谱、股权架构图谱、集团关系图谱等知识图谱，可提供多种图谱布局，包括树状布局中心布局力学布局自动布局等。relation-graph 源码传送门。
vis---vue实现network扩展节点功能
maidu_xbd的博客
08-09 4080
需求描述：双击某节点，展开节点。 解决方法：数组【nodeExtendArr】表示已扩展的节点，监听节点双击事件，当节点双击时，判断该节点id是否存在数组【nodeExtendArr】中：【if(this.nodeExtendArr.indexOf(id)!=-1){...}else{....}】 完整代码： <template> <!-- 动态扩展节点 --> <div> <!--width,height 画布的宽...
VUE插件 - relation-graph 【人员关系图谱】
weixin_49216328的博客
11-24 3585
相信很多朋友会有关系图谱的需求，但是 echarts 又满足不了各位的需求，怎么办呢？今天他来了！！相比较 echarts 和 D3 , 在关系图谱功能方面它能够给使用者带来更好的体验！
vue 拓扑组件_vue 集成 vis-network 实现网络拓扑图的方法
weixin_39948309的博客
12-19 1369
vis.js 网站https://visjs.org/vs code 下安装命令npm install vis-network在vue 下引入 vis-network组件const vis = require("vis-network/dist/vis-network.min.js");require("vis-network/dist/vis-network.min.css"...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值