javascript - 有什么办法可以强制所有带有标签的 Visjs 节点大小相同？-6ren

javascript - 有什么办法可以强制所有带有标签的 Visjs 节点大小相同？

转载作者：太空宇宙更新时间：2023-11-04 15:01:50

我一直在尝试使用 Visjs.org 库来使用网络布局构建图形的可视化表示。我想创建一个在节点内具有标签的图形(我对节点使用圆圈)，所有节点的大小都相同。

我可以让图表出现并且标签确实在节点内。但是，节点总是缩放到标签文本的大小。所以更长的标签 = 更大的节点。

对于用户而言，这不是我想要的，这似乎暗示了对更大节点的一些意想不到的重要性。我试过使用缩放选项但无济于事。我可以通过将标签放在节点外来解决问题，但这不是我想要的。

我想做的是强制所有节点大小相同，并且标签仍然位于节点内。我正在附上我的示例程序。

<html>
<head>
    <script type="text/javascript" src="http://visjs.org/dist/vis.js"></script>
    <link href="http://visjs.org/dist/vis.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: 'Fred'},
        {id: 2, label: 'Bill'},
        {id: 3, label: 'Texas'},
        {id: 4, label: 'North\nCarolina'},
        {id: 5, label: 'Planes'},
        {id: 6, label: 'Books'}
    ]);

    // create an array with edges
    var edges = new vis.DataSet([
        {from: 1, to: 2, label: 'knows'},
        {from: 1, to: 3, label: 'lives-in'},
        {from: 1, to: 5, label: 'likes'},
        {from: 2, to: 4, label: 'lives-in'},
        {from: 2, to: 5, label: 'flies'},
        {from: 1, to: 6, label: 'likes'}
    ]);

    // create a network
    var container = document.getElementById('mynetwork');

    // provide the data in the vis format
    var data = {
        nodes: nodes,
        edges: edges
    };
    var options = { nodes: {shape: 'circle', scaling:{max: 200, min: 100}}};

    // initialize your network!
    var network = new vis.Network(container, data, options);
</script>
</body>
</html>

最佳答案

是的，有办法

您应该只在节点选项中设置 widthConstraint。

例子:

var options = {
    nodes: {
      font: { color: 'white' },
      color: 'blue',
      shape: 'circle',
      widthConstraint: 50,
    }
  };
var network = new vis.Network(container, data, options);

看: