vis---network网状拓扑图展示

vis.js官网【https://visjs.org/】

vis.js network作用：用于显示动态的，自动组织的，可自定义的网络视图。如下图：

vis.js network使用：（图中案例使用vue实现，具体实现步骤如下）

第一步：引入文件

安装【npm inatall vis --save】，在【main.js】中引入【import "vis/dist/vis.css";】，在展示网络拓扑图的页面引入【import Vis from "vis";】

第二步：定义dom

首先在html中定义一个DOM用来放置关系图，注意一定要设置宽度，高度。

 <!--width,height 画布的宽度，高度。 可以是百分比或像素，一般在dom元素上设置 -->
    <div id="network_id" class="network" style="width:600px; height:50vh;border:1px solid #ccc;"></div>

第三步：初始化方法

第四步：构建拓扑方法:(增加nodes和edges集合参数)

第五步：调用

 

关于options配置参考【https://www.ame.cool/pages/222681/】

完整代码：

<template>
  <!-- vis关系图基础展示 -->
  <div>
    <!--width,height 画布的宽度，高度。 可以是百分比或像素，一般在dom元素上设置 -->
    <div id="network_id" class="network" style="width:600px; height:50vh;border:1px solid #ccc;"></div>
  </div>
</template>
<script>
import Vis from "vis";
export default {
  data() {
    return {
      dialogVisible: false,
      nodes: [],
      edges: [],
      // network:null,
      container: null,
      //   节点数组
      nodesArray: [
        {
          id: 0,
          name: "小明",
          group: "people",
        },
        {
          id: 1,
          name: "大立",
          group: "people",
        },
        {
          id: 2,
          name: "珊珊",
          group: "people",
        },
        {
          id: 3,
          name: "旺旺",
          group: "animal",
        },
        {
          id: 4,
          name: "咕咕",
          group: "animal",
        },
      ],
      //   关系线数组
      edgesArray: [
        { id: "e1", from: 0, to: 3, label: "宠物" },
        { id: "e2", from: 1, to: 4, label: "宠物" },
        { id: "e3", from: 0, to: 1, label: "好朋友" },
        { id: "e4", from: 1, to: 2, label: "好朋友" },
      ],
      options: {},
      data: {},
    };
  },
  mounted() {
    this.init();
    this.network.moveTo({ scale: 0.8 });
    var param = { nodes: this.nodesArray, edges: this.edgesArray };
    this.addNetworkParams(param);
  },
  methods: {
    // 初始化network
    init() {
      //1.创建一个nodes对象
      this.nodes = new Vis.DataSet([]);
      //2.创建一个edges对象
      this.edges = new Vis.DataSet([]);
      // 3.创建一个网络拓扑图
      this.container = document.getElementById("network_id");
      // 4.创建data对象
      this.data = {
        nodes: this.nodes,
        edges: this.edges,
      };
      // 5.全局配置
      this.options = {
        autoResize: true, //网络将自动检测其容器的大小调整，并相应地重绘自身
        locale: "cn", //语言设置：工具栏显示中文
        //设置语言
        locales: {
          cn: {
            //工具栏中文翻译
            edit: "编辑",
            del: "删除当前节点或关系",
            back: "返回",
            addNode: "添加节点",
            addEdge: "添加连线",
            editNode: "编辑节点",
            editEdge: "编辑连线",
            addDescription: "点击空白处可添加节点",
            edgeDescription: "点击某个节点拖拽连线可连接另一个节点",
            editEdgeDescription: "可拖拽连线改变关系",
            createEdgeError: "无法将边连接到集群",
            deleteClusterError: "无法删除集群.",
            editClusterError: "无法编辑群集'",
          },
        },
        //该配置项主要用来生成一个可视化的配置器
        configure: {
          enabled: true,
          filter: "nodes,edges",
          container: this.container,
          showButton: true,
        },
        // 组模块
        groups: {
          useDefaultGroups: true,
          myGroupId: {},
          people: {
            shape: "circle",
            color: { background: "#fd91b7" },
            font: { color: "white" },
          },
          animal: {
            shape: "dot",
            color: { background: "#7ed6df" },
          },
        },

        // 设置节点样式
        nodes: {
          shape: "ellipse", //节点的外观。为circle时label显示在节点内，为dot时label显示在节点下方
          size: 30, //节点的大小，
          shadow: false, //如果为true，则节点使用默认设置投射阴影。
          font: {
            //字体配置
            size: 20,
            color: "rgb(117, 218, 167)",
            align: "center",
          },
          color: {
            border: "transparent", //节点边框颜色
            background: "#fd91b7", //节点背景颜色
            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,
          },
          font: {
            color: "#343434",
            size: 18, // px
            face: "arial",
            background: "none",
            strokeWidth: 2, // px
            strokeColor: "#ffffff",
            align: "horizontal",
            multi: false,
            vadjust: 0,
            bold: {
              color: "#343434",
              size: 14, // px
              face: "arial",
              vadjust: 0,
              mod: "bold",
            },
            ital: {
              color: "#343434",
              size: 14, // px
              face: "arial",
              vadjust: 0,
              mod: "italic",
            },
            boldital: {
              color: "#343434",
              size: 14, // px
              face: "arial",
              vadjust: 0,
              mod: "bold italic",
            },
            mono: {
              color: "#343434",
              size: 15, // px
              face: "courier new",
              vadjust: 2,
              mod: "",
            },
          },
          shadow: false,
          smooth: {
            //设置两个节点之前的连线的状态
            enabled: true, //默认是true，设置为false之后，两个节点之前的连线始终为直线，不会出现贝塞尔曲线
          },
          arrows: { to: true }, //箭头指向to
        },
        // 布局
        layout: {
          randomSeed: 1, //配置每次生成的节点位置都一样，参数为数字1、2等
          // hierarchical: {
          // direction: "LR", //UD:上下 DU:下上 LR:左右 RL:右左
          // sortMethod: "directed",
          // }, //层级结构显示}
        },
        //物理引擎-计算节点之前斥力，进行自动排列的属性
        physics: {
          enabled: true, //默认是true，设置为false后，节点将不会自动改变，拖动谁谁动。不影响其他的节点
          barnesHut: {
            gravitationalConstant: -4000,
            centralGravity: 0.3,
            springLength: 120,
            springConstant: 0.04,
            damping: 0.09,
            avoidOverlap: 0,
          },
        },
        //用于所有用户与网络的交互。处理鼠标和触摸事件以及导航按钮和弹出窗口
        interaction: {
          hover: true,
          dragNodes: true, //是否能拖动节点
          dragView: true, //是否能拖动画布
          hover: true, //鼠标移过后加粗该节点和连接线
          multiselect: true, //按 ctrl 多选
          selectable: true, //是否可以点击选择
          selectConnectedEdges: true, //选择节点后是否显示连接线
          hoverConnectedEdges: true, //鼠标滑动节点后是否显示连接线
          hideEdgesOnDrag: true, //拖动视图时不会绘制边
          zoomView: true, //是否能缩放画布
        },
        //操作模块:包括 添加、删除、获取选中点、设置选中点、拖拽系列、点击等等
        manipulation: {
          enabled: true, //该属性表示可以编辑，出现编辑操作按钮
          addNode: true,
          addEdge: true,
          // editNode: undefined,
          editEdge: true,
          deleteNode: true,
          deleteEdge: true,
        },
      };
      // 6.初始化网络拓扑图
      this.network = new Vis.Network(this.container, this.data, this.options);
    },
    //扩展节点 增加nodes和edges集合参数
    addNetworkParams(param) {
      //添加节点
      for (var i = 0; i < param.nodes.length; i++) {
        var node = param.nodes[i];
        console.log("node=", node);
        this.nodes.add({
          label: node.name,
          ...node,
        });
        console.log("nodes=", this.nodes);
      }
      //添加关系
      for (var i = 0; i < param.edges.length; i++) {
        var edge = param.edges[i];
        this.edges.add({
          ...edge,
        });
      }
    },
  },
};
</script>
<style lang="less">
</style>