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

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

如何解决如何在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 举报,一经查实,本站将立刻删除。