vis实现类知识图谱的拓扑图

已于 2022-09-17 20:35:49 修改
阅读量1.1k 收藏 4
点赞数 1
分类专栏： visjs 文章标签： javascript 前端 vue.js
于 2022-09-17 20:10:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YouZi_X/article/details/126906659
版权

vis.js可视化的出发点之一是它们可以处理动态数据，并允许对数据进行操作。为了实现这一点，vis.js包括一个基于灵活键/值 DataSet并DataView处理非结构化JSON数据的功能。

  • 数据集DataSet，存储JSON的ID对象。可增删改查，过滤排序…

  • 资料检视DataView，提供数据集上经过过滤或格式化的视图。通过订阅DataView中的更改，获取过滤或格式化的数据，而无需一直指定过滤器和字段类型

  • 数据管道DataPipe,DataPipe从一个DataSet 获取数据DataView，对其进行转换并传入第二个 DataSet，用于强制数据类型，更改结构…

一、总结

Vis.js 是一个动态的，基于浏览器的可视化库。该库被设计为易于使用，能处理大量的动态数据。该库由以下几部分组成：

一是数据集和数据视图，基于灵活的键/值数据集，可以添加，更新和删除项目，订阅数据集变化；

二是时间轴，用于显示不同类型的时间轴数据，在时间轴上项目可以交互移动，缩放和操纵；

三是图形，使用节点和边显示一个交互式图形或网络。

二、配置&使用

1.vis-network 入门

vue安装

# v4.21.0 不再维护
npm install vis

# v9.0.1 建议使用下面这个
npm install vis-network

引入 vis-network

<template>
    <div id="mynetwork" class="mynetwork"></div>
</template>
<script>
//v4.21.0
import * as vis from "vis";
export default {
    data() {
        return { network: null };
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            // 节点
            var nodes = new vis.DataSet([
                { id: 1, label: "Node 1" },
                { id: 2, label: "Node 2" },
                { id: 3, label: "Node 3" },
                { id: 4, label: "Node 4" },
                { id: 5, label: "Node 5" },
            ]);

            //  边
            var edges = new vis.DataSet([
                { id: 1, from: 1, to: 3 },
                { id: 2, from: 1, to: 3 },
                { id: 5, from: 3, to: 1 },
                { from: 1, to: 2 },
                { from: 2, to: 4 },
                { from: 2, to: 5 },
                { from: 3, to: 3 },
            ]);

            // create a network
            var container = document.getElementById("mynetwork");
            var data = {
                nodes: nodes,
                edges: edges,
            };
            var options = {};
            this.network = new vis.Network(container, data, options);
        },
    },
};
</script>

<style scoped>
.mynetwork {
    height: 100%;
}
</style>

传统html页面使用

<html>
<head>
    <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
    <style type="text/css">
        #mynetwork {
            width: 600px;
            height: 400px;
            border: 1px solid lightgray;
        }
    </style>
</head>

<body>
<div id="mynetwork"></div>

<script type="text/javascript">
    // 创建节点数据数组
    var nodes = new vis.DataSet([
        { id: 1, label: "Node 1" },
        { id: 2, label: "Node 2" },
        { id: 3, label: "Node 3" },
        { id: 4, label: "Node 4" },
        { id: 5, label: "Node 5" }
    ]);

    // 创建边数据数组
    var edges = new vis.DataSet([
        { from: 1, to: 3 },
        { from: 1, to: 2 },
        { from: 2, to: 4 },
        { from: 2, to: 5 },
        { from: 3, to: 3 }
    ]);
    // 获取容器
    var container = document.getElementById('mynetwork');
    // 将数据赋值给vis 数据格式化器
    var data = {
        nodes: nodes,
        edges: edges
    };
    var options = {};
    // 初始化关系图
    var network = new vis.Network(container, data, options);
</script>
</body>
</html>

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

事件监听

交互模块触发

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.prdData(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,
            });
          }
        }
      });
    },
    prdData(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>

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

功能点：

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

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

  3. 缩放画布，菜单同步缩放

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

自定义菜单
vis拓扑图 右键节点展开菜单

Vue使用vis实现拓扑图
m0_51431448的博客
05-10 7454
visjs官方文档visjs示例 1. 安装 npm install vis 2. 封装成组件 <template> <div :id="id" style="width: 100%; height: 100%"></div> </template> <script> import vis from "vis"; let options; export default { data() { return { .
vis拓扑图demo
07-23
vis拓扑图的使用demo，有动态和立体效果
知识图谱拓扑图
Simple_ll的博客
01-07 1396
知识图谱从逻辑上可以分为概念层和数据层，数据层指以三元组为表现形式的客观事实集合，而概念层是它的“上层建筑”，是经过积累沉淀的知识集合。建设中以本体模型和实体数据库为核心，根据二者的建设顺序又分为先定义本体和数据规范，再抽取数据的“自顶向下型”和先抽取实体数据，再逐层构建本体的“自底向上型”两种模式，前者适用于场景较为固定，存在可量化行业逻辑的领域，如金融、医疗、法律等；后者适用于新拓展的，有大量数据积累，行业逻辑难以直接展现的领域。总体而言，搭建知识图谱从数据源开始，经历了知识抽取、知识融合...
探索知识海洋，一网打尽——qs-system-vue-1：基于知识图谱的智能问答系统
最新发布
gitblog_00086的博客
09-12 311
探索知识海洋，一网打尽——qs-system-vue-1：基于知识图谱的智能问答系统 qs-system-vue-1 项目地址: https://gitcode.com/gh_mirrors/qs/qs-system-vue-1...
使用Vis.js绘制知识图谱
feifeiyechuan的博客
07-16 1148
1、参考地址： （1）文件下载地址：https://cdnjs.com/libraries/vis
利用visio组建知识地图
qq_18739911的博客
05-27 445
内容：略
什么是知识图谱？
weixin_33910460的博客
01-18 183
什么是知识图谱，我们可以把它理解成一张由知识点相互连接而成的语义网络。 任何一种网络都是由节点和节点关系构成。为了直观理解这个概念，拿小孩子玩的磁力棒举例，节点是钢珠，节点关系是磁力棒。 很多的钢珠(节点)和磁力棒(关系)相互关联，就构成了一张网络 在知识图谱中，什么是节点，什么是节点关系？如图1所示，人物、作品、地点、数值、身高等都可以...
vue 集成 vis-network 实现网络拓扑图的方法
10-16
在本文中，我们将会介绍如何在Vue项目中集成vis-network，并通过实例代码展示如何实现一个网络拓扑图。首先，我们需要了解如何在Vue项目中安装vis-network。 在安装vis-network之前，确保你已经安装了Node.js和npm...
vue 拓扑组件_vue 集成 vis-network 实现网络拓扑图
weixin_39720510的博客
12-19 1571
let DIR = "/jtopo/";let nodes = [{ id: 1, shape: "circularImage", image: DIR + "server.png" },{ id: 2, shape: "circularImage", image: DIR + "server.png" },{ id: 3, shape: "circularImage", image: DIR +...
知识图谱数据库还有OLTP、OLAP(MOLAP、ROLAP、HOLAP)的区别？ 首个实时图数仓架构分析...
图特摩斯科技-博客
09-29 4426
面向大规模实时数据分析的HOLAP知识图谱数据仓库AbutionGraph与传统的OLTP图库有什么不同？我们将对OLAP图库的应用场景、面向的客户、实现原理、未来发展做出对比分析。
vis-network绘制拓扑图
weixin_47359038的博客
06-06 5906
vis-network绘制拓扑图
vue知识图谱.xmind
03-31
一张图带你了解整个xue全家桶相关。包括vue、vue-router、vuex、webpack、浏览器相关等所有vue全家桶相关知识点。
知识图谱拓扑图前端实现HTML实现
11-18
知识图谱&&拓扑图前端实现HTML实现！
visio图库（非常有用）
03-04
众多包括公司，图标，设备等visio图库
知识图谱完整教程
11-02
第一讲 知识图谱概览；第二讲 知识表示和知识建模；第三讲 知识抽取与挖掘I
VUE知识点脑图.xmind
04-06
超级用心的总结了Vue学习、面试、使用中的知识点。包含Vue框架的知识点，非常详细，可编辑；另含有面试必问的问题。
vis.js网络拓扑图点击折叠节点和展开节点
笑到世界都狼狈的博客
09-11 5340
首先看一下效果图： 1.数据中要添加的属性如下图所示： 2.数据中添加入上图属性后，添加点击事件即可，代码如下： //todo 双击时折叠和展开 network.on("doubleClick", function(params) {//双击事件 if (params.nodes.length != 0) {//确定为节点双击事件 var click_node_id = params.nodes[0]; remove_a
Vue知识图谱(更新中)
多看多听多总结
08-03 1003
Vue知识图谱
常用的知识结构图
马立弘
11-01 510
参考： http://geek.csdn.net/news/detail/110921
vue如何实现知识图谱
07-13
Vue本身并没有直接的知识图谱实现。但是，你可以使用Vue结合其他库或组件来实现知识图谱。 一种常见的做法是使用Vue作为前端框架，结合D3.js或vis.js等数据可视化库来绘制图形。你可以使用Vue组件来管理和渲染图形，并使用D3.js或vis.js等库来处理和布局图形数据。通过这种方式，你可以将知识图谱的节点和边以图形的形式展示出来，并提供交互功能。 另一种方法是使用已有的知识图谱库，如Cytoscape.js或GoJS。这些库提供了丰富的功能和API，可以帮助你构建和操作知识图谱。你可以使用Vue来管理和渲染图形，同时使用这些库来处理图形数据和交互。 总之，Vue可以作为前端框架与其他库或组件配合使用来实现知识图谱。具体的实现方式取决于你的需求和选择的库。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值