gpt4 book ai didi

javascript - mxgraph 避免边缘重叠节点或其他边缘

转载 作者:行者123 更新时间:2023-12-05 07:11:00 29 4
gpt4 key购买 nike

我正在使用 mxgraph 来可视化分层布局。我尝试使用 mxHierarchicalLayoutmxEdgeStyle.TopToBottom 创建正交和捆绑的边缘。但我的问题是生成的边是重叠的节点和其他边,而不是绕过节点,如下图所示。我的目标是图表看起来像图片的右侧。有没有人有实现这一目标的想法?

The picture with problem and objective

<html>
<head>
<!-- Sets the basepath for the library if not in same directory -->
<script type="text/javascript">
mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
</script>

<!-- Loads and initializes the library -->
<script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script>

<script type="text/javascript">
function main(container)
{
var container = document.getElementById("graphContainer");

if (!mxClient.isBrowserSupported()) {
mxUtils.error("Browser is not supported!", 200, false);
} else {
var graph = new mxGraph(container);

var style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.TopToBottom;

var layout = new mxHierarchicalLayout(graph);
layout.disableEdgeStyle = false;
layout.edgeStyle = 3;

var parent = graph.getDefaultParent();

graph.getModel().beginUpdate();
try {
var v1 = graph.insertVertex(parent, 1, '1', 0, 0, 200, 45);
var v2 = graph.insertVertex(parent, 2, '2', 0, 0, 200, 45);
var v3 = graph.insertVertex(parent, 3, '3', 0, 0, 200, 45);
var v4 = graph.insertVertex(parent, 4, '4', 0, 0, 200, 45);
var v5 = graph.insertVertex(parent, 5, '5', 0, 0, 200, 45);
var v6 = graph.insertVertex(parent, 6, '6', 0, 0, 200, 45);
var v7 = graph.insertVertex(parent, 7, '7', 0, 0, 200, 45);
var v8 = graph.insertVertex(parent, 8, '8', 0, 0, 200, 45);
var v9 = graph.insertVertex(parent, 9, '9', 0, 0, 200, 45);
var v10 = graph.insertVertex(parent, 10, '10', 0, 0, 200, 45);
var v11 = graph.insertVertex(parent, 11, '11', 0, 0, 200, 45);
var v12 = graph.insertVertex(parent, 12, '12', 0, 0, 200, 45);
var v13 = graph.insertVertex(parent, 13, '13', 0, 0, 200, 45);
var v14 = graph.insertVertex(parent, 14, '14', 0, 0, 200, 45);

var e1 = graph.insertEdge(parent, 1, '', v1, v5);
var e2 = graph.insertEdge(parent, 2, '', v2, v5);
var e3 = graph.insertEdge(parent, 3, '', v3, v8);
var e4 = graph.insertEdge(parent, 4, '', v4, v8);
var e5 = graph.insertEdge(parent, 5, '', v5, v8);
var e6 = graph.insertEdge(parent, 6, '', v5, v9);
var e7 = graph.insertEdge(parent, 7, '', v6, v10,);
var e8 = graph.insertEdge(parent, 8, '', v7, v10);
var e9 = graph.insertEdge(parent, 9, '', v8, v12);
var e10 = graph.insertEdge(parent, 10, '', v9, v12);
var e11 = graph.insertEdge(parent, 11, '', v10, v12);
var e12 = graph.insertEdge(parent, 12, '', v11, v12);
var e13 = graph.insertEdge(parent, 13, '', v12, v14);
var e14 = graph.insertEdge(parent, 14, '', v13, v14);
var e15 = graph.insertEdge(parent, 15, '', v8, v9);

layout.execute(parent);
} finally {
graph.getModel().endUpdate();
}
}
};
</script>

</head>

<body onload="main(document.getElementById('graphContainer'))">

<div id="graphContainer" style="position:relative;overflow:scroll;width:1900;height:800;cursor:default;">
</div>
</body>

</html>

最佳答案

使用 mxCompactTreeLayout 而不是 mxHierarchialLayout 它将解决您的问题。 https://jgraph.github.io/mxgraph/docs/js-api/files/layout/mxCompactTreeLayout-js.html

关于javascript - mxgraph 避免边缘重叠节点或其他边缘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60971442/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com