I have come across a simple hierarchical vis.js network example, but it seems to be displaying in a single vertical line instead of from left to right.
Despite trying various options, I haven't been able to get it to show up correctly. Can you point out what might be going wrong?
// Here is an array of nodes
var nodes = new vis.DataSet(
[
{ id: 1, value: 21, label: 'GR' },
{ id: 12, value: 10, label: 'PL' },
{ id: 18, value: 28, label: 'MM' },
{ id: 22, value: 12, label: 'I_STORE_LOCATOR' },
{ id: 23, value: 18, label: 'SL' },
{ id: 29, value: 3, label: 'I_PRICEMATCH' },
{ id: 30, value: 6, label: 'PM' }
]
);
// Creating an array with edges
var edges = new vis.DataSet(
[
{id: 13, eLabel: 100, arrows: "to", from: 1, to: 12, },
{id: 26, eLabel: 100, arrows: "to", from: 1, to: 18, },
{id: 17, eLabel: 100, arrows: "to", from: 12, to: 1, },
{id: 32, eLabel: 60, arrows: "to", from: 18, to: 22, },
{id: 47, eLabel: 60, arrows: "to", from: 18, to: 23, },
{id: 53, eLabel: 30, arrows: "to", from: 18, to: 29, },
{id: 62, eLabel: 30, arrows: "to", from: 18, to: 30, },
{id: 34, eLabel: 120, arrows: "to", from: 22, to: 23, },
{id: 40, eLabel: 60, arrows: "to", from: 23, to: 22, },
{id: 43, eLabel: 120, arrows: "to", from: 23, to: 18, },
{id: 55, eLabel: 30, arrows: "to", from: 29, to: 30, },
{id: 58, eLabel: 60, arrows: "to", from: 30, to: 18, }
]
);
// Setting up the network
var container = document.getElementById("mynetwork");
var treeData = {
nodes: nodes,
edges: edges,
};
let options = {
"layout": {
"randomSeed": 2345,
"improvedLayout":true,
"clusterThreshold": 150,
"hierarchical": {
"enabled":true,
"levelSeparation": 150,
"nodeSpacing": 100,
"treeSpacing": 200,
"blockShifting": true,
"edgeMinimization": true,
"parentCentralization": true,
"direction": 'LR', // UD, DU, LR, RL
"sortMethod": 'directed', // hubsize, directed
"shakeTowards": 'leaves' // roots, leaves
}
}
};
var network = new vis.Network(container, treeData, options);
network.on('click', function (properties) {
var ids = properties.nodes;
// Loop through the items in the array
for (let i = 0; i < ids.length; i++){
treeData.nodes.update({id:ids[i],hidden:true})
}
});#mynetwork {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/standalone/umd/vis-network.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/dist/vis-network.min.css" rel="stylesheet"/>
<div id="mynetwork"></div>