visjs关系图 - 爱码网

官网：http://visjs.org/index.html#download_install
git地址：https://github.com/binliuli/visual.git
visjs关系图
<!doctype html>
<html>

<head>
  <title>Network | Basic usage</title>

  <script type="text/javascript" src="http://visjs.org/dist/vis.js"></script>
  <link href="http://visjs.org/dist/vis-network.min.css" rel="stylesheet" type="text/css" />

  <style type="text/css">
    #mynetwork {
      width: 600px;
      height: 400px;
      border: 1px solid lightgray;
    }
  </style>
</head>

<body>

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

  <script type="text/javascript">
    // create an array with nodes
    var nodes = new vis.DataSet([
      { id: 1, label: 'Node 1', shape: 'circularImage',image:"./m.jpg"},
      { id: 2, label: 'Node 2' },
      { id: 3, label: 'Node 3' },
      { id: 4, label: 'Node 4' },
      { id: 5, label: 'Node 5' }
    ]);

    // create an array with edges
    var edges = new vis.DataSet([
      { from: 1, to: 3, label: '担保', title: 'dsjkdjksa' },
      { from: 3, to: 1, label: '客户' },
      { from: 3, to: 1, label: '担保' },
      { from: 1, to: 2 },
      { from: 2, to: 4 },
      { from: 2, to: 5 }
    ]);

    // create a network
    var container = document.getElementById('mynetwork');
    var data = {
      nodes: nodes,
      edges: edges
    };
    var options = {
      edges: {
        shadow: true,//连接线阴影配置
        smooth: true,//是否显示方向箭头
        arrows: { to: true }//箭头指向from节点
      },
      nodes: {
        shape: 'dot',
        size: 30,
        font: {
          size: 10
        },
        borderWidth: 2,
        shadow: true
      }
    };
    var network = new vis.Network(container, data, options);
    network.on("dragEnd", function (params) {
      if (params.nodes && params.nodes.length > 0) {
        network.clustering.updateClusteredNode(params.nodes[0], { physics: false });
      }
    });

  </script>


</body>

</html>