如何在textarea中加载mxGraph的XML图？

问题描述

我有以下XML代码。这是在名为“ xml”的变量中声明的：

    let xml = '<mxGraphModel> <root> <Diagram href="http://www.jgraph.com/" id="0"> <mxCell /> </Diagram> <Layer label="Default Layer" id="1"> <mxCell parent="0" /> </Layer> <Roundrect label="Rounded" href="" id="2"> <mxCell style="rounded" vertex="1" parent="1"> <mxGeometry x="110" width="80" height="40" as="geometry" /> </mxCell> </Roundrect> <Roundrect label="Rounded" href="" id="3"> <mxCell style="rounded" vertex="1" parent="1"> <mxGeometry x="350" y="60" width="80" height="40" as="geometry" /> </mxCell> </Roundrect> <Roundrect label="Rounded" href="" id="4"> <mxCell style="rounded" vertex="1" parent="1"> <mxGeometry x="350" y="330" width="100" height="40" as="geometry" /> </mxCell> </Roundrect> <Roundrect label="Rounded" href="" id="5"> <mxCell style="rounded" vertex="1" parent="1"> <mxGeometry x="240" y="140" width="80" height="40" as="geometry" /> </mxCell> </Roundrect> <Roundrect label="Rounded" href="" id="6"> <mxCell style="rounded" vertex="1" parent="1"> <mxGeometry x="140" y="120" width="80" height="40" as="geometry" /> </mxCell> </Roundrect> <Connector label="" href="" id="7"> <mxCell edge="1" parent="1" source="2" target="6"> <mxGeometry relative="1" as="geometry" /> </mxCell> </Connector> <Connector label="" href="" id="8"> <mxCell edge="1" parent="1" source="6" target="3"> <mxGeometry relative="1" as="geometry" /> </mxCell> </Connector> <Connector label="" href="" id="9"> <mxCell edge="1" parent="1" source="5" target="3"> <mxGeometry relative="1" as="geometry" /> </mxCell> </Connector> <Connector label="" href="" id="10"> <mxCell edge="1" parent="1" source="4" target="3"> <mxGeometry relative="1" as="geometry" /> </mxCell> </Connector> <Roundrect label="Rounded" href="" id="11"> <mxCell style="rounded" vertex="1" parent="1"> <mxGeometry x="610" y="100" width="80" height="40" as="geometry" /> </mxCell> </Roundrect> <Connector label="" href="" id="12"> <mxCell edge="1" parent="1" source="3" target="11"> <mxGeometry relative="1" as="geometry" /> </mxCell> </Connector> </root> </mxGraphModel>';

我想显示此“ xml”并在使用Javascript加载页面时在textarea（id =“ xml”）中绘制图形。这是mxGraph XML代码。我有一个textarea，我想在其中使用此XML代码显示该图。

我正在使用此代码，但是它不起作用：

var textNode = document.getElementById('xml');
let xml = '<mxGraphModel> <root> <Diagram href="http://www.jgraph.com/" id="0"> <mxCell /> </Diagram> <Layer label="Default Layer" id="1"> <mxCell parent="0" /> </Layer> <Roundrect label="Rounded" href="" id="2"> <mxCell style="rounded" vertex="1" parent="1"> <mxGeometry x="110" width="80" height="40" as="geometry" /> </mxCell> </Roundrect> <Roundrect label="Rounded" href="" id="3"> <mxCell style="rounded" vertex="1" parent="1"> <mxGeometry x="350" y="60" width="80" height="40" as="geometry" /> </mxCell> </Roundrect> <Roundrect label="Rounded" href="" id="4"> <mxCell style="rounded" vertex="1" parent="1"> <mxGeometry x="350" y="330" width="100" height="40" as="geometry" /> </mxCell> </Roundrect> <Roundrect label="Rounded" href="" id="5"> <mxCell style="rounded" vertex="1" parent="1"> <mxGeometry x="240" y="140" width="80" height="40" as="geometry" /> </mxCell> </Roundrect> <Roundrect label="Rounded" href="" id="6"> <mxCell style="rounded" vertex="1" parent="1"> <mxGeometry x="140" y="120" width="80" height="40" as="geometry" /> </mxCell> </Roundrect> <Connector label="" href="" id="7"> <mxCell edge="1" parent="1" source="2" target="6"> <mxGeometry relative="1" as="geometry" /> </mxCell> </Connector> <Connector label="" href="" id="8"> <mxCell edge="1" parent="1" source="6" target="3"> <mxGeometry relative="1" as="geometry" /> </mxCell> </Connector> <Connector label="" href="" id="9"> <mxCell edge="1" parent="1" source="5" target="3"> <mxGeometry relative="1" as="geometry" /> </mxCell> </Connector> <Connector label="" href="" id="10"> <mxCell edge="1" parent="1" source="4" target="3"> <mxGeometry relative="1" as="geometry" /> </mxCell> </Connector> <Roundrect label="Rounded" href="" id="11"> <mxCell style="rounded" vertex="1" parent="1"> <mxGeometry x="610" y="100" width="80" height="40" as="geometry" /> </mxCell> </Roundrect> <Connector label="" href="" id="12"> <mxCell edge="1" parent="1" source="3" target="11"> <mxGeometry relative="1" as="geometry" /> </mxCell> </Connector> </root> </mxGraphModel>';
var graph = new mxGraph(textNode);
var diagram = mxUtils.parseXml(xml);
var codec = new mxCodec(diagram);
codec.decode(diagram.documentElement,graph.getModel());
graph.fit();

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）