微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

在xml的帮助下在mxGraph中显示图

如何解决在xml的帮助下在mxGraph中显示图

图(带有xml)未显示与我借助mxGraph工具创建的图完全相同的图,我正在使用以下代码创建图:

我已经使用mxGraph工具创建了图,如下所示:

enter image description here

到目前为止,我已经将xml保存在localstorage中,并且从xml中我执行了以下代码,以在我的div容器之一中显示该图,如下所示:

let xml = '<mxGraphModel dx="963" dy="318" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100"><root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="2" value="" style="shape=mxgraph.basic.t2;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#000000;strokeWidth=2" vertex="1" parent="1"><mxGeometry x="30" y="30" width="79" height="267" as="geometry"/></mxCell><mxCell id="3" value="Actor" style="shape=umlActor;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;html=1;outlineConnect=0;" vertex="1" parent="1"><mxGeometry x="470" y="80" width="140" height="120" as="geometry"/></mxCell><mxCell id="4" value="" style="shape=internalStorage;whiteSpace=wrap;html=1;backgroundOutline=1;" vertex="1" parent="1"><mxGeometry x="300" y="40" width="80" height="80" as="geometry"/></mxCell><mxCell id="5" value="" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="220" y="230" width="120" height="80" as="geometry"/></mxCell></root></mxGraphModel>';
let doc = mxUtils.parseXml(xml);
let codec = new mxCodec(doc);
codec.decode(doc.documentElement,graph.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;
}
graph.addCells(cells);

下面的输出与上面的代码结合在一起

enter image description here

所以问题是我想显示与创建的图完全相同的图,但它只显示对象的形状。

解决方法

核心mxGraph库无法理解3个不正确形状的形状样式。这些在GraphEditor的图形中定义。例如,请参见umlActor

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。