Question

我正在使用mxgraph对分层布局进行可视化。我尝试使用mxHierarchicalLayout和mxEdgeStyle.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>

Answer 1

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

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

1 个答案: