I have a code generating all nodes in my graph ordered in one vertical line. How should I change my code to draw Nodes4 shifted to the left as in following picture? Pay attention that nodes 4 and 5 belong to the same parent (Node3)?
See jsfiddle
const data = {
nodes: [
{ id: 1, label: 'Node1', group: 1 },
{ id: 2, label: 'Node2', group: 2 },
{ id: 3, label: 'Node3', group: 3 },
{ id: 4, label: 'Node4', group: 4 },
{ id: 5, label: 'Node5', group: 5 }
],
edges: [
{ from: 1, to: 2, arrows: 'to' },
{ from: 2, to: 3, arrows: 'to' },
{ from: 3, to: 4, arrows: 'to' },
{ from: 3, to: 5, arrows: 'to' },
{ from: 4, to: 5, arrows: 'to' }
]
};
const container = document.getElementById('graph');
const options = {
groups: {
1: {events: [{ eventID: '70000', message: 'Message 1' }, { eventID: '70001', message: 'Message 2' }]},
2: {events: [{ eventID: '70002', message: 'Message 3' }]},
3: {events: [{ eventID: '70003', message: 'Message 4' }]},
4: {events: [{ eventID: '70004', message: 'Message 5' }]},
5: {events: [{ eventID: '70005', message: 'Message 6' }]}
},
edges: {
length: 600, // Customize the length of the connection lines (adjust the value as needed)
smooth: false, // Disable curved line rendering to make lines straight
arrows: {
to: {
enabled: true, // Enable direction arrows
}
}
},
layout: {
hierarchical: {
enabled: true,
direction: 'UD', // Set direction from up to down
sortMethod: 'directed' // Position child nodes based on directed sort
}
},
physics: {
enabled: false // Disable the physics simulation
}
};
// Update the label of each node to include all eventIDs from groups.events
data.nodes.forEach(node => {
const group = options.groups[node.group];
const eventDefIDs = group.events.map(event => `${event.eventID} - (${event.message})`).join('\n');
node.label += `\n\n${eventDefIDs}`;
});
const network = new vis.Network(container, data, options);
I tried manipulations with layout and edges, but without any success..
Any assistance very appreciated,
Alen