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 に答える