vis.js minimize crossed edges
Asked Answered
A

2

7

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 enter image description here instead of enter image description here

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
};
Axes answered 18/9, 2017 at 11:13 Comment(3)
If you found an answer for this I'd love to hear it. While a lot of vis.js is very handy, I find it regularly and pointlessly causes edges to intersect when they don't need to.Towe
@PeterMcNab, I'd recommend you to mark this question as "favourite" to get updates if there will be anyNoblesse
Yep, we are dealing with the same issue.. would love to know if anyone found an answer to this!Bushtit
N
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.

Noblesse answered 9/5, 2018 at 21:52 Comment(0)
V
1

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);
Volny answered 20/4, 2021 at 11:32 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.