Question

我一直在尝试使用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>

Answer 1

这些不是解决方案，而是更多的解决方法。

1）您可以做的是将所有标签的默认长度设为四个字符，后跟省略号。然后你可以给标题赋予标签所需的实际值。这样，当您将鼠标移动到节点上时，它将显示预期的标签，同时为所有节点保持统一的大小。

一个节点的示例实现应如下所示：

{id: 3, label: 'Texa...', title: 'Texas'}

2）另一种选择是给所有节点一个大于最大标签的节点。当然，这将是一个非常不灵活的系统，因为当您添加标签大于当前最大的节点时，它会抛出系统。实现这一点的方法是通过设置节点的默认设置，然后进行缩放，如下所示：

{id: 1, label: 'Fred', value: (insert int), scaling: {label:{enabled: true}}}

希望这有帮助！

Answer 2

是的，有办法

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

示例：

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

看：

有没有办法强制所有Visjs节点的标签大小相同？

2 个答案:

是的，有办法