visjs关系图

最新推荐文章于 2025-06-11 09:19:20 发布

原创最新推荐文章于 2025-06-11 09:19:20 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#visjs #关系图

visjs 专栏收录该内容

4 篇文章

订阅专栏

本文展示了一个使用Vis.js库创建的基本网络图示例。该示例定义了包含节点和边的数据集，并设置了网络图的样式及交互特性，如阴影效果、节点大小等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网：http://visjs.org/index.html#download_install

git地址：https://github.com/binliuli/visual.git

<!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>