我一直在尝试使用 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);
看:
关于javascript - 有什么办法可以强制所有带有标签的 Visjs 节点大小相同？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33109546/