4

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

2 回答 2

9

是的，有办法

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

例子：

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

看 ： 在此处输入图像描述

于 2018-11-06T09:56:58.523 回答
4

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

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

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

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

2) 另一种选择是让所有节点的大小大于最大标签的大小。当然，这将是一个非常不灵活的系统，因为当您添加一个标签大于当前最大标签的节点时，系统就会关闭。实现这一点的方法是设置节点的默认设置，然后像这样进行缩放：

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

希望这有帮助！

于 2016-09-28T07:31:47.560 回答