任何方式強制所有Visjs節點與標籤相同的大小？

我一直在試驗Visjs.org庫，以使用網絡佈局來構建圖形的可視表示。我想創建一個圖表，其中節點內有標籤（我使用圓圈表示節點），所有節點的大小相同。任何方式強制所有Visjs節點與標籤相同的大小？

我可以看到圖形，標籤確實在節點內。但是，節點總是縮放到標籤文本的大小。所以更長的標籤=更大的節點。

這不是我想要的用戶，這似乎意味着一些意想不到的重要性更大的節點。我嘗試玩縮放選項，但無濟於事。我可以通過將標籤放置在節點之外來解決問題，但這不是我想要的。

我想要做的是強制所有的節點是相同的大小，仍然有標籤在節點內。我附上我的示例程序。

<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>

來源

2015-10-13 Kelvin Lawrence

只是爲了清楚我明白。您是否希望動態縮小長標籤的字體大小，使文本無論文本有多長都適合在節點內部？ – bhspencer

非常感謝您回覆我。我認爲將文本比例放在錦上添花會很明顯，但顯然這是圖表放大後的最佳用戶體驗。 –

但我也認爲，如果文本很長，我可能會切換到文本將在節點下的佈局。對於我所用的用例，文本標籤不會比我提供的樣本長，實際上通常比「北卡羅萊納州」短。在這個特定的例子中，我會很高興，如果我可以說「讓所有節點成爲北卡羅來納節點的大小，我真的希望從文檔中我使用min/max的代碼會強制這樣做，但它似乎沒有效果。再次爲您可能有的任何想法。 –

這些不是解決方案，而是更多的解決方法。

1）你可以做的是將所有標籤的默認長度設置爲4個字符，後跟省略號。然後，您可以爲標題提供標籤所需的實際值。通過這種方式將鼠標移到節點上，它將顯示預期的標籤，同時爲所有節點保持統一的大小。

爲一個節點的示例實現應該如下：

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

2）另一種方法是給所有節點的尺寸小於最大標籤的大。當然，這將是一個非常不靈活的系統，因爲當你添加一個標籤大於當前最大的節點時，它會拋出系統。你會實現這一點的方法是通過設置默認設置爲一個節點，則縮放，像這樣：

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

希望這有助於！

來源

2016-09-28 07:31:47 YashTD

任何方式強制所有Visjs節點與標籤相同的大小？

回答

相關問題