个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-05 07:11:00 28 4
gpt4 key购买 nike

我正在使用 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>

最佳答案

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

关于javascript - mxgraph 避免边缘重叠节点或其他边缘，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60971442/

28 4 0
文章推荐： php - 实时服务器上的 Laravel Coinbase API Http 异常错误但适用于 Xampp
文章推荐： emacs - 如何将ctags格式文件转换为etags格式文件？
文章推荐： python - 计数没有。使用 dask 的大型 Parquet 文件中的行数没有内存错误
文章推荐： java - 删除后 Netty SslHandler 握手超时
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com