mxgraph avoid edges overlapping nodes or other edges
Question
I'm using mxgraph to visulize a hierarchical layout. I try to create orthogonal and bundled edges with mxHierarchicalLayout and 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 answers
solution1
0 2021-07-20 06:29:23
Use mxCompactTreeLayout other than mxHierarchialLayout it will solve your problem. https://jgraph.github.io/mxgraph/docs/js-api/files/layout/mxCompactTreeLayout-js.html
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.