Question

我使用mxParallelEdgeLayout允许顶点之间有多个平行边。

只要顶点共享同一父对象，此方法就可以正常工作。但是，一旦我连接了不同父母的孩子的顶点，边缘自动选择的连接点就显得很奇怪：

在此处找到完整的可运行示例代码：

<html>

<head>
  <!-- Sets the basepath for the library -->
  <script type="text/javascript">
    mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
  </script>

  <!-- loads mxGraph library -->
  <script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script>

  <script type="text/javascript">
    function main(container) {

      if (!mxClient.isBrowserSupported()) {
        mxUtils.error('Browser is not supported!', 200, false);

      } else {
        var graph = new mxGraph(container);

        // vertex style
        var style = graph.getStylesheet().getDefaultVertexStyle();
        delete style[mxConstants.STYLE_FILLCOLOR];
        style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;

        // edge style
        var edge_style = graph.getStylesheet().getDefaultEdgeStyle();
        edge_style[mxConstants.STYLE_ENDARROW] = 0;

        var parent = graph.getDefaultParent();

        // layout supporting parallel edges
        var layout = new mxParallelEdgeLayout(graph);
        layout.spacing = 10;

        var layoutMgr = new mxLayoutManager(graph);

        layoutMgr.getLayout = function(cell) {
          return layout;
        };

        graph.getModel().beginUpdate();
        try {

          var box1 = graph.insertVertex(parent, null, null, 0, 0, 100, 50);
          box1.setConnectable(false);
          var box2 = graph.insertVertex(parent, null, null, 0, 80, 100, 50);
          box2.setConnectable(false);

          var v1 = graph.insertVertex(box1, null, null, 10, 10, 30, 30);
          v1.setConnectable(true);

          var v2 = graph.insertVertex(box1, null, null, 60, 10, 30, 30);
          v2.setConnectable(true);

          var v3 = graph.insertVertex(box2, null, null, 15, 10, 30, 30);
          v3.setConnectable(true);

          // connect vertices within same parents
          graph.insertEdge(parent, null, null, v1, v2)
          graph.insertEdge(parent, null, null, v1, v2)

          graph.insertEdge(parent, null, null, box1, box2)
          graph.insertEdge(parent, null, null, box1, box2)

          // connect vertices embedded in different parents
          graph.insertEdge(parent, null, null, v1, v3)
          graph.insertEdge(parent, null, null, v1, v3)

        } finally {
          graph.getModel().endUpdate();
        }
      }
    };
  </script>
</head>

<body onload="main(document.getElementById('graphContainer'))">
  <div id="graphContainer" />
</body>

</html>

我怀疑意外行为在某种程度上与mxLayoutManager的实现有关……但是我很难解决它。非常感谢您的帮助。

使用mxParallelEdgeLayout在不同父级的顶点之间的边缘

0 个答案: