vis.js Level sorting in Hierarchical Layout

Question

I have a fairly simple hierarchical structure of nodes, but when vis.js draws them, the order of nodes on each level doesn't make much sense - there are a lot of crossed edges (screenshot: Default Layout )

I am hoping to get a layout similar to that given here: Expected Layout

My vis.js options are as follows;

{
    "layout": {
        "hierarchical": {
            "direction": "LR",
            "sortMethod": "directed",
            "nodeSpacing": 200,
            "treeSpacing": 400
        }
    },
    "edges": {
        "smooth": {
            "type": "continuous"
        }
    },
    "nodes": {
        "physics": false
    }
};

What is the best method to produce this sorted layout?

Herc

The issue may be version-dependent: see https://mcmap.net/q/1627720/-vis-js-crossed-edges-in-4-21-hierarchical-graph/3995261 – Diphyodont

perhaps something like this might work, check the example in this fiddle jsfiddle.net/86vqfgeo, in case you could supply a fiddle like that with your data it could be very helpful – Comnenus

Answer 1

I suggest your try enabling physics, which will sort out the edges crossing, etc.

However, in hierarchical layout, it's a good idea to disable the engine once it's done the first iterations by catching the 'stabilizationIterationsDone' event as follows:

network.on("stabilizationIterationsDone", function(){
  network.setOptions( { physics: false } );
});

Heres

Answer 2

you should remove the quotation marks. these are object's properties, not strings. it should look like this:

layout: {
    hierarchical: {
        direction: "LR",
        sortMethod: "directed",
        nodeSpacing: 200,
        treeSpacing: 400
    }
},
edges: {
    smooth: {
        type: "continuous"
    }
},
nodes: {
    physics: false
}

Acrylic

using quotation marks is a valid syntax, so this can't be a source of any problem (moreover, this is required in JSON which is valid JS) – Diphyodont