Problem when generating a dynamic graph in vis.js

Question

I'm having a problem with this library vis.js

The data is correct (and inside the Graph is correct too), but visually they are not being represented correctly.

Example:

The red node has a connection to the blue node. The green node has a connection to the black node

Problem: The red node passes inside the green node to the blue node, although the green node has no connection to the blue node. Visually it shows that the green node has a connection with the blue node, although it does not have.

Graph configuration code:

var options = {
layout: {
  hierarchical: {
    direction: "UD",
    sortMethod: "directed"
  }
},
interaction: {dragNodes :false},
physics: {
  enabled: false
},
configure: {
  filter: function (option, path) {
    if (path.indexOf('hierarchical') !== -1) {
      return true;
    }
    return false;
  },
  showButton:false
}

The graph is in Hierarchical mode: http://visjs.org/docs/network/layout.html

I have already tried using "physics" and some other solutions that were answered here in stackoverflow (English and BR), but nothing worked

Answer 1

So on github it looks like there are plenty of hierarchical directed graph issues with layout. But as it looks like you are trying to build a specific layout, you can always use the level key on each node to determine where it should sit. Here is an example of your network, but with a more correct layout:

// create an array with nodes
  var nodes = new vis.DataSet([
    {id: 1, label: '1', level: 0},
    {id: 2, label: '2', level: 1},
    {id: 3, label: '3', level: 1},
    {id: 4, label: '4', level: 1},
    {id: 5, label: '5', level: 2}
  ])

  // create an array with edges
  var edges = new vis.DataSet([
    {from: 1, to: 2},
    {from: 2, to: 3},
    {from: 1, to: 3},
    {from: 1, to: 4},        
    {from: 3, to: 5},
  ])

  // create a network
  var container = document.getElementById('mynetwork')
  var data = {
    nodes: nodes,
    edges: edges
  }
  var options = {    
    layout: {
      improvedLayout: true,
      hierarchical: {        
		sortMethod: 'directed'
      }
    },
    physics: false
  }
  var network = new vis.Network(container, data, options)

#mynetwork {
  width: 300px;
  height: 200px;
  border: 1px solid lightgray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.js"></script>
<div id="mynetwork"/>