如何获得连接的mxgraph之间的父子关系

Question

我正在尝试简化连接之间的关系 mxgraph

问题：绘制图形后 ，我正在尝试简化关系。

我正在尝试获取json中已连接节点之间的关系。

注意：解决方案必须适用于每个绘制状态。

这是codepen：

https://codepen.io/eabangalore/pen/pmELpL

我想从上面的代码片段中获取关系。

预期输出（来自绘制关系）：

[
  {"id":0,"parent":"#","text":"A","child":[{"cid":1,"connectionText":"Bangalore"}]},
  {"id":1,"parent":0,"text":"B","child":[{"cid":2,"connectionText":""}]},
  {"id":2,"parent":1,"text":"C","child":[{"cid":null,"connectionText":""}]}
];

请参考codepen，如下代码段不起作用。

[
  {"id":0,"parent":"#","text":"A","child":[{"cid":1,"connectionText":"Bangalore"}]},
  {"id":1,"parent":0,"text":"B","child":[{"cid":2,"connectionText":""}]},
  {"id":2,"parent":1,"text":"C","child":[{"cid":null,"connectionText":""}]}
];

请帮助我提前谢谢！！！

Answer 1

查看此 CodePen 链接，其中包含您提供的代码片段的修改版本。在其中，您可以添加新元素并更改文本，并查看表示图中关系的更新后的 json 字符串：https://codepen.io/tien-q-nguyen2/pen/GaQXBO

从第一次发布这个答案开始，我还对函数进行了一些编辑。

注意：根据您在原始问题中输入的预期输出，每个顶点元素只有一个父级（{“id”：1，“parent”：0 <= 在您给出的示例中），因此如果有多个节点指向同一个 child 时，子级的 Parent 属性将仅引用第一个父级的 id。如果需要，我可以将父级的属性更改为一个可以保留多个父级 id 的数组。

function getNodesFrom(graph){
    var cells = graph.getModel().cells;

    var vertices = [], edges = [];
    for (var key in cells) {
        if (cells[key].isVertex()){
            vertices.push(cells[key]);
        } 
        else if (cells[key].isEdge()){
            edges.push(cells[key]);
        }
    }

    var simpleVertices = [], simpleEdges = [];
    var newIndex = 0;
    var newIndexOf = [];
    vertices.forEach(function(vertex){
        simpleVertices.push({id: newIndex, value: vertex.value});
        newIndexOf[vertex.id] = newIndex++;
    });
    edges.forEach(function(edge){
        if (edge.target === null || edge.source === null) return;
        simpleEdges.push({
            parentId: newIndexOf[edge.source.id], 
            childId: newIndexOf[edge.target.id], 
            value: edge.value
        });
    });

    var edgesForParentIndex = [];
    var edgesForChildIndex = [];
    simpleEdges.forEach(function(edge){
        if (edgesForParentIndex[edge.parentId] === undefined){
            edgesForParentIndex[edge.parentId] = [];
        }
        edgesForParentIndex[edge.parentId].push(edge);

        if (edgesForChildIndex[edge.childId] === undefined){
            edgesForChildIndex[edge.childId] = [];
        }
        edgesForChildIndex[edge.childId].push(edge);
    });

    var nodes = [];
    simpleVertices.forEach(function(vertex){
        var node = {};
        node.id = vertex.id;
        if (edgesForChildIndex[node.id] === undefined){
            node.parent = '#';
        } else {
            node.parent = edgesForChildIndex[node.id][0].parentId;
        }
        node.text = (vertex.value === undefined || vertex.value === null) ? '' : vertex.value;
        node.child = [];
        if (edgesForParentIndex[node.id] === undefined){
            node.child.push({cid: null, connectionText: ""});
        } else {
            edgesForParentIndex[node.id].forEach(function(edge){
                var text = (edge.value === undefined || edge.value === null) ? '' : edge.value;
                node.child.push({cid: edge.childId, connectionText: text});
            });
        }
        nodes.push(node);
    });

    return nodes;
}