mxgraph избегает ребер, перекрывающих узлы или другие ребра - PullRequest
Новая
       68

mxgraph избегает ребер, перекрывающих узлы или другие ребра

0 голосов
/ 01 апреля 2020

Я использую mxgraph для визуализации иерархического макета. Я пытаюсь создать ортогональные и связанные ребра с mxHierarchicalLayout и mxEdgeStyle.TopToBottom. Но моя проблема в том, что получающиеся ребра являются перекрывающимися узлами и другими ребрами, а не обходят узлы, как показано на рисунке ниже. Моя цель в том, чтобы график выглядел как на правой стороне картинки. У кого-нибудь есть идеи для этого?

Картинка с проблемой и целью 

<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>
...