[visjs] Use visjs to draw a relationship diagram

Attach the link:
vis website
visjs Chinese instruction document

Steps for usage:

1. Installation

npm install vis-network

2. Introduce in the page

<div id="mynetwork" class="myChart" :style="{width: '100%', height: '90vh'}"></div>

require('vis-network/dist/dist/vis-network.min.css')
const vis = require('vis-network/dist/vis-network.min')

makeVis() {
      var that = this
      // var DIR = '/jtopo/'
      var nodes = [ // 每行加上shape: 'circle' ，则节点显示圆形
        {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 = [ // 每行加上label: '关系名称'，则会在线中间显示节点关系名
	    {from: 1, to: 3},
        {from: 1, to: 2},
        {from: 2, to: 4},
        {from: 2, to: 5}
	 ]
      var data = {
        nodes: nodes,
        edges: edges
      }
      var container = document.getElementById('mynetwork')
      var options = {
        nodes: {
          font: {
            color: '#000', // 字体的颜色
            size: 30 // 显示字体大小
          },
          scaling: {
            min: 20,
            max: 40 // 缩放效果比例
          },
          borderWidth: 1,
          color: {
            border: 'white',
            background: 'red' // 若是引用图标，背景颜色
          }
        },
        groups: {
          ws: { // 系统定义的形状 dot等 这些官网都可以找到
            shape: 'dot',
            color: 'white'
          }
        },
        layout: {
          randomSeed: 1 // 配置每次生成的节点位置都一样，参数为数字1、2等
        },
        physics: {
          // barnesHut: { gravitationalConstant: -30000 },
          barnesHut: {
            gravitationalConstant: -80000,
            springConstant: 0.001,
            springLength: 200
          },
          stabilization: false
          // { iterations: 2500 }
        },
        interaction: {
          // navigationButtons: true,
          hover: true, // 鼠标移过后加粗该节点和连接线
          selectConnectedEdges: false, // 选择节点后是否显示连接线
          hoverConnectedEdges: false, // 鼠标滑动节点后是否显示连接线
          tooltipDelay: 200,
          zoomView: true // 是否能缩放画布
        },
        edges: {
          color: { // 连接线的样式
            color: 'white',
            highlight: 'white',
            hover: '#848484',
            inherit: 'from',
            opacity: 1.0
          },
          shadow: true, // 连接线阴影配置
          smooth: true // 是否显示方向箭头
          // arrows: {to : true }//箭头指向from节点
        }
      }
      that.network = new vis.Network(container, data, options)
      that.network.on('click', function(params) {
      })
    },

Link:
vis website
visjs Chinese user manual
insert image description here

Citing external links:

//源码
<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>

[visjs] Use visjs to draw a relationship diagram

Guess you like