Vis.js Sorting levels in a hierarchical layout

Question

I have a rather simple hierarchical structure of nodes, but when vis.js draws them, the order of nodes at each level does not make much sense - there are a lot of crossed edges (screenshot: Default layout )

I hope to get a layout similar to the one 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 way to create this sorted layout?

Answer 1

you must remove the quotation marks. these are properties of an object, not a string. It should look like this:

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