vis.js minimize crossed edges

Question

I'm new to JavaScript and using vis.js for making a hierarchical ("UD") network. I have a problem: many edges on the same level cross.

Is there a way in vis.js to minimize crossed edges? In my example where I have a simple tree, there should no crossed edges at all.

I.e. I want something like instead of

My question is related to vis.js Level sorting in Hierarchical Layout

Here are my vis.js options:

var options = {
    edges: {
        smooth: {
            type: 'cubicBezier',
            roundness: 0.4
        }
    },
    layout: {
		improvedLayout: true,
        hierarchical: {
            direction: "UD"
        }
    },
    physics:false
};

Answer 1

Please try an older version of vis.js: a number of people report that using 4.18.1 fixed an issue with bad order in hierarchical layout for them (though, they are having troubles with layout that doesn't have these horizontal links). If it helps, please report back to the thread (downgrading is not a nice workaround anyway).

PS there's another question where they report that the problem took place after 4.19.1 → 4.20.0 upgrade.

Answer 2

You may consider using https://github.com/d3/d3-hierarchy to perform just the layout.

The following (pseudo) code details the approach:

    // copy vis network into d3 tree structure
    // d3Tree is a nested object with obj.children being the array of children
    const d3Tree = copyDfs(id);

    // use d3.tree to perform the actual layout
    // nodeSize is used to control the spacing between nodes
    // d3.tree performs layout and returns a nested object with x, y coordinates calculated
    const layoutRoot = d3.tree().nodeSize([100, 100])(d3.hierarchy(d3Tree));

    // copy d3 layout info back to viz nodes
    // specifically, copy layoutNode.x to vis node.x (and similarly for y)
    patchDfs(layoutRoot, x0, 0);