在 mxgraph 中创建反向 mxHierarchical 布局答案

【问题标题】：Create reversed mxHierarchical layout in mxgraph在 mxgraph 中创建反向 mxHierarchical 布局
【发布时间】：2019-02-16 00:44:47
【问题描述】：

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

我的图表

我的图表使用 mxHierarchicalLayout 转换 代码sn-p：

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());

图表超出了我的“画布”，无法查看这是否是“反转”树的负责参数。有人可以帮忙吗？提前致谢。

附言

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

【问题讨论】：

标签： javascript mxgraph jgraphx jgraph

【解决方案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;
    }

现在的图表是这样的

【讨论】：