vis.js最小化交叉边缘

Question

我是JavaScript新手，并使用vis.js创建分层（“UD”）网络。我有一个问题：同一级别上的许多边缘交叉。

vis.js中有没有办法减少交叉边缘？在我的例子中，我有一个简单的树，根本不应该有交叉的边缘。

即。我想要而不是

我的问题与vis.js Level sorting in Hierarchical Layout

有关

以下是我的vis.js选项：

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

Answer 1

您可以考虑使用 https://github.com/d3/d3-hierarchy 仅执行布局。

以下（伪）代码详细说明了该方法：

    // 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);

Answer 2

请尝试较旧版本的vis.js：a number of people report使用4.18.1解决了分层布局中的错误顺序问题（尽管如此，他们遇到了布局无法解决的问题这些水平链接）。如果有帮助，请向线程报告（无论如何降级都不是一个好的解决方法）。

PS那里another question他们报告问题发生在4.19.1→4.20.0升级之后。