在 mxgraph 中创建反向 mxHierarchical 布局

Question

向社区问好！我目前正在创建自定义 mxgraph 编辑器，并且正在使用不同的布局转换图表。我想将我的图形布局转换为 mxHierarchicalLayout 但反转（而不是 top-to-down 我希望它是 down-to-top）。我所做的事和我想做的事的例子。

我的图表

我的图表使用 mxHierarchicalLayout 转换 代码片段：

let layout = new mxHierarchicalLayout(graph); layout.execute(graph.getDefaultParent());

我要如何转换图表

我在mxHierarchicalLayout中发现有一个orientation成员变量，默认是'NORTH'。但是，当我尝试执行以下操作时

 let layout = new mxHierarchicalLayout(graph);
 layout.orientation=mxConstants.DIRECTION_SOUTH;
 layout.execute(graph.getDefaultParent());

图表超出了我的 "canvas" 并且无法查看以检查这是否是 "reverse" 树的负责参数。有人能帮忙吗？提前致谢。

PS

当我使用layout.orientation = mxConstants.DIRECTION_SOUTH; 似乎布局已按照我的意愿转换但无法看到，因为 svg 元素的坐标是 type x=-10, y=-5 (negatives)，对此有任何解决方法吗？

Answer 1

已解决

我不知道为什么 mxgraph 在 mxHierarchicalLayout 中有 orientation = south 的错误行为，但我设法为我的问题创建了一个变通解决方案，因为我意识到新生成的布局将我的 mxCell 子图形对象向北（负 y 坐标）。所以我所做的是在 layout.execute(graph.getDefaultParent()); 之后，我得到了图表的每个子节点并检索了最负的 y 坐标，然后将图表的所有单元格从它们的新坐标移动到一个新的增加的绝对值最负的 y 坐标元素。

代码

 function convertGraphToInverseHorizontalTree(){
        let layout = new mxHierarchicalLayout(graph);
        layout.orientation = mxConstants.DIRECTION_SOUTH;
        layout.execute(graph.getDefaultParent());
        graph.model.beginUpdate();
        //get the most negative y
        let mostNegativeY = getMostNegativeCoordinateY(graph);
        let children = graph.getChildCells();
        graph.moveCells(children, undefined , Math.abs(mostNegativeY));
        graph.model.endUpdate();
    }

    function getMostNegativeCoordinateY(graph){
        let children = graph.getChildCells();
        let mostNegative = 10000;
        for(let i = 0; i < children.length; i++){
           if(children[i].geometry != undefined){
               if(children[i].geometry.y < mostNegative){
                   mostNegative = children[i].geometry.y;
                   }
           }
        }
        return mostNegative;
    }

现在的图是这样的

在 mxgraph 中创建反向 mxHierarchical 布局

Create reversed mxHierarchical layout in mxgraph

javascript

mxgraph

jgraph

jgraphx