I would like to create a node in the network plugin of the visjs framework, so that it stays fixed at the bottom.
Getting it staying fixed is no problem, however the rest of the nodes seem to have somekind of algorithm for the x and y coordinates.
Doing a { x: 0, y: 0 } will not work it seems because the x and y are coordinates in relation to other nodes.
I think (if I got you right), you should:
set physics to false.
give fixed position to true for all nodes,
set the node positions as you wish.
after drawing the network (in the next tick) remove the fixed position from all other nodes.
See the snippet below. (the fixed position stays on node no 5).
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: 'Node 1', fixed: true, group: 1, x:0, y:0},
{id: 2, label: 'Node 2', fixed: true, group: 2, x:10, y:110},
{id: 3, label: 'Node 3', fixed: true, group: 1, x:120, y:20},
{id: 4, label: 'Node 4', fixed: true, group: 2, x:-110, y:-110},
{id: 5, label: 'Node 5', fixed: true, group: 2, x:220, y:220}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 3},
{from: 2, to: 4},
{from: 3, to: 4},
{from: 2, to: 5}
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
physics: false
};
var network = new vis.Network(container, data, options);
setTimeout(function(){
nodes.forEach(node => {
if(node.id !== 5){
nodes.update({id: node.id, fixed: false});
}
})
})
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
p {
max-width: 600px;
}
<!doctype html>
<html>
<head>
<title>Network | Basic usage</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="mynetwork"></div>
</body>
</html>
Related
I have created visualisation using vis-network, the problem is that the nodes are overlapping one on top of the other.
I have tried changing different values of nodeSpacing till 1000, that didn't help
Also i have tried setting barnesHut.avoidOverlap to 1 and that didn't help either,
any suggestions to fix this will be highly appreciated.
Updated options object
var options = {
interaction: {
hover: true
},
manipulation: {
enabled: true,
},
layout: {
hierarchical: {
direction: "LR",
shakeTowards: "leaves",
nodeSpacing: 1000,
treeSpacing: 300,
},
},
physics: {
stabilization: {
enabled: true, // <------ Disables animation.
iterations: 4000
},
barnesHut: {
avoidOverlap: 1
}
}
};
As mentioned in the documentation here for the layout.hierarchical.nodeSpacing option:
This is only for the initial layout. If you enable physics, the node distance there will be the effective node distance.
Therefore nodeSpacing isn't the final distance when physics is enabled. Two possible options are described below with examples.
nodeSpacing with Physics Disabled
The nodeSpacing option could be used with physics disabled. With physics disabled edges will likely overlap nodes when there are a large number of nodes. An example of this can be seen at https://jsfiddle.net/pbx8m9sk/.
nodeDistance with Hierarchical Repulsion Solver
As mentioned in the solver section of the documentation here the hierarchical repulsion solver is used by default when using a hierarchical layout. When the hierarchicalRepulsion solver is used the nodeDistance option can be used to control the distance between the nodes.
For example:
var options = {
physics: {
hierarchicalRepulsion: {
nodeDistance: 300,
}
}
};
Snippet using hierarchical repulsion solver with node distance set is below. You would likely want to adjust the nodeDistance and could adjust other hierarchicalRepulsion options, depending on the data.
// Setup initial nodes / edges
const nodes = [
{id: 1, label: '1'},
{id: 2, label: '2'},
{id: 3, label: '3'},
{id: 4, label: '4'},
{id: 5, label: '5'},
{id: 6, label: '6'},
{id: 7, label: '7'},
{id: 8, label: '8'},
{id: 9, label: '9'},
{id: 10, label: '10'},
{id: 11, label: '11'},
];
const edges = [
{from: 1, to: 2},
{from: 2, to: 3},
{from: 2, to: 4},
{from: 2, to: 5},
{from: 2, to: 6},
{from: 2, to: 7},
{from: 2, to: 8},
{from: 2, to: 9},
{from: 2, to: 10},
{from: 2, to: 11},
];
// Add a number nodes / edges
const nodesToAdd = 200;
for (let i = 12; i < 12 + nodesToAdd; i++){
nodes.push({id: i, label: `${i}`});
edges.push({from: 11, to: i});
}
var data = {
nodes: nodes,
edges: edges,
};
// create a network
var container = document.getElementById("mynetwork");
var options = {
interaction: {
hover: true
},
manipulation: {
enabled: true
},
nodes: {
shape: 'dot',
},
layout: {
hierarchical: { },
},
physics: {
hierarchicalRepulsion: {
nodeDistance: 300,
}
},
};
var network = new vis.Network(container, data, options);
#mynetwork {
width: 100%;
height: 170px;
border: 1px solid lightgray;
}
<script src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
<div id="mynetwork"></div>
There is a simple example for vis-network.js which generates this:
<!doctype html>
<html>
<head>
<title>Network | Basic usage</title>
<link href="https://unpkg.com/vis-network#latest/dist/vis-network.min.css" type="text/css" rel="stylesheet" />
<script src="https://unpkg.com/vis-network#latest/dist/vis-network.min.js" type="text/javascript"></script>
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
/*border: 1px solid lightgray;*/
}
</style>
</head>
<body>
<p>
Create a simple network with some nodes and edges.
</p>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5},
{from: 3, to: 3}
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>
Now I know I can remove a border from styles and that removes a border around the diagram but when I click to highlight something on diagram the border comes back
What is the proper way to suppress the "not defined" anywhere border from showing up?
This is a solution in my case ;)
#mynetwork .vis-network:focus{
outline: none;
}
Is it possible to have nodes in vis.js in hierarchical layout without overlaping on X axis?
I tried to add options:
var options = {
layout: {
hierarchical: {
direction: "UD",
sortMethod: "directed"
},
physics: {
solver: "barnesHut"
,barnesHut: {
avoidOverlap: 1
}
}
}
};
You can increase layout.hierarchical.nodeSpacing for the initial layout.
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: 'Node 1 with lage text'},
{id: 2, label: 'Node 2 with lage text'},
{id: 3, label: 'Node 3 with lage text'},
{id: 4, label: 'Node 4 with lage text'},
{id: 5, label: 'Node 5 with lage text'}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
layout: {
hierarchical: {
direction: "UD",
sortMethod: "directed",
nodeSpacing: 200 // <-- !!!!!!!
}
},
physics: false
};
var network = new vis.Network(container, data, options);
#mynetwork {
width: 100%;
height: 100%;
border: 1px solid lightgray;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.js" type="text/javascript"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="mynetwork"></div>
</body>
</html>
Another solution might be
myVisOptions = {
layout: {
hierarchical: {
direction: "UD",
sortMethod: "directed",
shakeTowards: 'roots'
}
},
physics: {
// https://visjs.github.io/vis-network/docs/network/physics.html
enabled: true,
hierarchicalRepulsion: {
avoidOverlap: 0.99
},
stabilization: {
iterations: 2000,
updateInterval: 100
},
solver: 'hierarchicalRepulsion'
},
nodes: {
margin: 8,
shape: 'box',
font: {size: 20},
color: {
background: 'white',
border: '#ffc468',
hover: '#ffc468',
highlight: '#ffc468'//, '#bd6500'
},
}
};
Is there a way to change the node size for the selected node without changing the size for all nodes in the options ?
These are my node options:
nodes: {
borderWidth: 1,
borderWidthSelected: 2,
physics: true,
color: {
border: '#000000',
background: '#ffffff',
highlight: {
border: '#000000',
background: '#B9B9BF'
}
},
shadow: {
enabled: false,
color: '#C11818',
size: 10,
x: 5,
y: 5
},
shape: 'circularImage',
mass: 2,
size: 25
}
I want to enlarge the selected node so it is more visible than the others.
network.on("selectNode", function (params) {
var nodeId = params.nodes[0];
var node = nodes.get(nodeId);
nodeClick(nodeId, nodes, edges, network);
// var options= {
// nodes: {
// size: 40
// }
// };
// network.setOptions(options);
});
The commented part sets the size for all nodes rather than the one selected and the node object doesn't have any handle on the options either.
You can change the font-size of the selected node to increase its size:
var nodes = new vis.DataSet([
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
]);
var edges = new vis.DataSet([
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
]);
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
interaction: { hover:true },
nodes: { font: { size: 14 }}
};
var network = new vis.Network(container, data, options);
network.on("selectNode", function (params) {
var selectedNodeId = params.nodes[0];
var node = network.body.nodes[selectedNodeId];
node.setOptions({
font: {
size: 20
}
});
});
network.on("deselectNode", function (params) {
var deselectedNodeId = params.previousSelection.nodes[0];
var node = network.body.nodes[deselectedNodeId];
node.setOptions({
font: {
size: options.nodes.font.size
}
});
});
#mynetwork {
width: 100%;
height: 100%;
border: 1px solid lightgray;
}
<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="mynetwork"></div>
</body>
</html>
if you have multiselect enabled, you can loop over params.nodes
for (id in params.nodes){
var node = network.body.nodes[params.nodes[id]];
...
}
(deselect respectivly)
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>
Yes there is a way
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 :
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!