Menu
I have been experimenting with the Visjs.org library to build visual representations of graphs using the Network layout. I would like to create a graph that has the labels inside the nodes (I am using circles for the nodes) with all nodes the same size.
I can get the graph to appear and the labels are indeed inside the nodes. However, the nodes always scale to the size of the label text. So longer labels = bigger nodes.
This is not what I want as to a user this appears to imply some unintended importance to the nodes that are bigger. I have tried playing with the scaling options but to no avail. I could solve the problem by placing the labels outside the nodes but that is not what I want.
What I would like to do is force all the nodes to be the same size and still have the labels be inside the nodes. I am attaching my sample program.
<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>
376
You should just set widthConstraint in node options.
example:
var options = {
nodes: {
font: { color: 'white' },
color: 'blue',
shape: 'circle',
widthConstraint: 50,
}
};
var network = new vis.Network(container, data, options);
Look :
101
These aren't solutions really but more of workarounds.
1) What you could do is make the default length for all your labels to something like four characters followed by an ellipsis. Then you could give the title the actual value which you want for the labels. This way on moving your mouse over the node it will show the intended label while maintaining a uniform size for all nodes.
The sample implementation for one node should be as follows:
{id: 3, label: 'Texa...', title: 'Texas'}
2) Another alternative would be to give all the nodes a size larger than that of the largest label. Of course this would be a very inflexible system because the moment you add a node with a label larger than the present largest, it throws the system off. The way you would implement this would be by setting the default setting for a node and then the scaling like so:
{id: 1, label: 'Fred', value: (insert int), scaling: {label:{enabled: true}}}
Hope this helped!
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
