mxgraph 避免边缘重叠节点或其他边缘
[英]mxgraph avoid edges overlapping nodes or other edges
问题描述
I'm using mxgraph to visulize a hierarchical layout.
我正在使用 mxgraph 来可视化分层布局。 I try to create orthogonal and bundled edges with mxHierarchicalLayout and mxEdgeStyle.TopToBottom .我尝试使用mxHierarchicalLayout和mxEdgeStyle.TopToBottom创建正交和捆绑的边缘。 But my problem is that the resulting edges are overlapping nodes and other edges, instead of going around the nodes, as the picture below describes.但我的问题是生成的边是重叠的节点和其他边，而不是绕过节点，如下图所述。 My goal is that the graph looks like on the right side of the picture.我的目标是图形看起来像图片的右侧。 Does anyone have ideas to achieve this?有没有人有实现这一目标的想法？
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>
1 个解决方案
解决方案1
0 2021-07-20 06:29:23
Use mxCompactTreeLayout other than mxHierarchialLayout it will solve your problem.使用 mxCompactTreeLayout 而非 mxHierarchialLayout 它将解决您的问题。 https://jgraph.github.io/mxgraph/docs/js-api/files/layout/mxCompactTreeLayout-js.html https://jgraph.github.io/mxgraph/docs/js-api/files/layout/mxCompactTreeLayout-js.html
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.