Fix vis.js nodes positions

47 Views Asked by At

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)?

Node4 shifted left

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

0

There are 0 best solutions below