javascript - vis.js 最小化交叉边

Question

我是 JavaScript 新手，使用 vis.js 制作分层（“UD”）网络。我有一个问题：同一水平交叉上有许多边缘。

vis.js 中有没有办法最小化交叉边缘？在我的示例中，我有一棵简单的树，根本不应该有交叉的边缘。

即我想要类似的东西而不是

我的问题与层次布局中的 vis.js 级别排序有关

这是我的 vis.js 选项：

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

Answer 1

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

PS 还有另一个问题，他们报告说问题发生在 4.19.1 → 4.20.0 升级之后。

Answer 2

您可以考虑使用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);