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

请尝试使用旧版本的vis.js：a number of people report，该版本使用4.18.1修复了它们在层次布局中顺序错误的问题(尽管它们在没有这些水平链接的布局方面遇到了问题)。如果有帮助，请反馈给帖子(降级无论如何都不是一个很好的解决办法)。

PS有一个another question，他们报告这个问题是在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);