mxGraph - 通过加载 XML 来显示图表

mxGraph - Displaying a diagram by loading a XML

的帮助下,能够从图形编辑器中获取动态 XML。 现在,我需要通过加载 XML(反向算法)

来显示图表

好的,类似于 的回答,我也不清楚如何获取保存整个图形的 graph 对象,因此我提出以下解决方法:

1) 将原始图形对象的引用获取到您的 index.html 代码中

。在 index.html 中添加一个全局变量以获取 graph 对象的引用

var universalGraph;

ii. 进入已创建 graph 对象的 .js 文件(例如转到 js/view/mxGraphView installListeners 函数上 将图形对象的实例分配给您的全局可访问引用

mxGraphView.prototype.installListeners = function(){
var graph = this.graph;
var container = graph.container;
universalGraph = graph; //this way, you will have access from .index.html to the graph object and you will be able to import the xml as shown in the example here  

如您所见,现在提出的全局 Graph.xml 解决方案 是多余的,因为现在这样您将始终可以访问 graph 对象 :)。

2) 因为你现在有了 graph 对象,你可以将它用于任何你想要的目的(export/import xml 状态)

编辑

我 post 还举例说明了如何在 index.html

中上传 xml
function uploadXML(){
        let xml = '<thexml_you_got_from_the_export><thexml_you_got_from_the_export/>';
        let doc = mxUtils.parseXml(xml);
        let codec = new mxCodec(doc);
        codec.decode(doc.documentElement, universalGraph.getModel());
        let elt = doc.documentElement.firstChild;
        let cells = [];
        while (elt != null)
        {
            let cell = codec.decode(elt)
            if(cell != undefined){
                if(cell.id != undefined && cell.parent != undefined && (cell.id == cell.parent)){
                    elt = elt.nextSibling;
                    continue;
                }
                cells.push(cell);
            }
            elt = elt.nextSibling;
        }
        universalGraph.addCells(cells);

    }

非常感谢@NickAth,另外,我尝试了自己的分析,发现以下解决方案工作正常。

var xml = {xml};
var ui = new EditorUi(new Editor());
var doc = mxUtils.parseXml(xml);
ui.editor.setGraphXml(doc.documentElement);