几行代码实现多对多网格视图

程序员查理

已于 2024-06-12 14:44:57 修改

阅读量229

点赞数 3

文章标签：前端 javascript

于 2024-06-12 14:38:35 首次发布

本文链接：https://blog.csdn.net/npl2580/article/details/139626104

版权

当我们希望实现如下图所示效果如何实现呢：

我们可以使用Vis.js，vis.js

Vis Network Examples

Vis.js 是一个支持多种网络可视化的库，使用简单，功能强大。

以下是具体实现例子

不带箭头的：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
</head>
<body>
<div id="mynetwork" style="width: 800px; height: 600px;"></div>
<script>
  const nodes = new vis.DataSet([
    { id: 1, label: 'Node 1' },
    { id: 2, label: 'Node 2' },
    { id: 3, label: 'Node 3' },
    { id: 4, label: 'Node 4' }
  ]);

  const edges = new vis.DataSet([
    { from: 1, to: 2 },
    { from: 1, to: 3 },
    { from: 2, to: 3 },
    { from: 2, to: 4 }
  ]);

  const container = document.getElementById('mynetwork');
  const data = { nodes: nodes, edges: edges };
  const options = {};
  const network = new vis.Network(container, data, options);
</script>
</body>
</html>

带箭头的：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
</head>
<body>
<div id="mynetwork" style="width: 800px; height: 600px;"></div>
<script>
  // 创建节点数据集
  const nodes = new vis.DataSet([
    { id: 1, label: 'Node 1' },
    { id: 2, label: 'Node 2' },
    { id: 3, label: 'Node 3' },
    { id: 4, label: 'Node 4' }
  ]);

  // 创建边数据集，并设置箭头
  const edges = new vis.DataSet([
    { from: 1, to: 2, arrows: 'to' },
    { from: 1, to: 3, arrows: 'to' },
    { from: 2, to: 3, arrows: 'to' },
    { from: 2, to: 4, arrows: 'to' }
  ]);

  // 获取容器元素
  const container = document.getElementById('mynetwork');

  // 创建数据对象
  const data = {
    nodes: nodes,
    edges: edges
  };

  // 设置网络选项
  const options = {
    edges: {
      arrows: {
        to: {
          enabled: true,
          scaleFactor: 1,
          type: 'arrow' // 'arrow' or 'bar'
        }
      }
    }
  };

  // 初始化网络
  const network = new vis.Network(container, data, options);
</script>
</body>
</html>

带上点击事件的：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
  <style>
    #mynetwork {
      width: 800px;
      height: 600px;
      border: 1px solid lightgray;
    }
    #eventOutput {
      margin-top: 20px;
    }
  </style>
</head>
<body>
<div id="mynetwork"></div>
<div id="eventOutput">Click on a node to see its details here...</div>
<script>
  // 创建节点数据集
  const nodes = new vis.DataSet([
    { id: 1, label: 'Node 1' },
    { id: 2, label: 'Node 2' },
    { id: 3, label: 'Node 3' },
    { id: 4, label: 'Node 4' }
  ]);

  // 创建边数据集，并设置箭头
  const edges = new vis.DataSet([
    { from: 1, to: 2, arrows: 'to' },
    { from: 1, to: 3, arrows: 'to' },
    { from: 2, to: 3, arrows: 'to' },
    { from: 2, to: 4, arrows: 'to' }
  ]);

  // 获取容器元素
  const container = document.getElementById('mynetwork');

  // 创建数据对象
  const data = {
    nodes: nodes,
    edges: edges
  };

  // 设置网络选项
  const options = {
    edges: {
      arrows: {
        to: {
          enabled: true,
          scaleFactor: 1,
          type: 'arrow' // 'arrow' or 'bar'
        }
      }
    }
  };

  // 初始化网络
  const network = new vis.Network(container, data, options);

  // 监听点击事件
  network.on('click', function (params) {
    if (params.nodes.length > 0) {
      const nodeId = params.nodes[0];
      const nodeData = nodes.get(nodeId);
      const msg = 'Clicked node: ' + JSON.stringify(nodeData, null, 2);
      alert(msg)
      //document.getElementById('eventOutput').innerText = 'Clicked node: ' + JSON.stringify(nodeData, null, 2);
    }
  });
</script>
</body>
</html>