mxGraph：使用 XML 创建图形答案

【问题标题】：mxGraph: Create graph with XMLmxGraph：使用 XML 创建图形
【发布时间】：2016-09-16 08:52:51
【问题描述】：

我正在尝试从 xml 文件创建图形。

我的 JavaScript 代码是-

function loadXML() {
console.log("Inside loadXML");
var doc = mxUtils.parseXml('<root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="2" value="&lt;img src=&quot;printer.png&quot; onClick=&quot;printer()&quot; style=&quot;width:40px;height:40px;&quot;&gt;&lt;img&gt;" style="shape=image" vertex="1" parent="1"><mxGeometry x="434" y="81" width="40" height="40" as="geometry"/></mxCell></root>');

console.log("XML Parse: " + doc);

var codec = new mxCodec(doc);

console.log("Node Length: " + doc.documentElement.childNodes.length);

var cells = new Array();
for (var i = 0; i < doc.documentElement.childNodes.length; i++) {
    console.log("Node ID: " + i);
    cells[i] = codec.decodeCell(doc.documentElement.childNodes[i]);
}

// import cells into the graph
var delta = mxClipboard.insertCount * mxClipboard.STEPSIZE;
var parent = graph.getDefaultParent();

graph.model.beginUpdate();
console.log("Cells Lenght: " + cells.length);
try
{
  for (var i = 0; i < cells.length; i++)
  {
    cells[i] = graph.importCells([cells[i]], delta, delta, parent)[0];
  }
}
finally
{
  graph.model.endUpdate();
}

// Increments the counter and selects the inserted cells
mxClipboard.insertCount++;
graph.setSelectionCells(cells);

}

在我的 XML 中，我只配置了一个节点。但是当我将我的 XML 加载到图中时，它需要两个节点，这意味着对于每个节点它都迭代两次。请有人帮助我做错了什么。

【问题讨论】：

标签： javascript mxgraph

【解决方案1】：

如果您使用的是Grapheditor 你可以使用它的方法（setGraphXml）：

let doc = mxUtils.parseXml(xml);

myEditor.editor.setGraphXml(doc.documentElement);

其中 doc 是已解析的 XML myEditor 是您的编辑器实例。您可以通过以下方式获取编辑器实例：

const myEditor = new EditorUi(new Editor(urlParams['chrome'] == '1', themes));

【讨论】：

它对我有用。我从我的 php 文件中存储了默认 XML，如下所示。 var xml = <?php echo json_encode($xml) ?>;

【解决方案2】：

试试这个

 var xml = '<root><mxCell id="2" value="World!Vishal" vertex="1"><mxGeometry x="200" y="150" width="80" height="30" as="geometry"/></mxCell><mxCell id="3" edge="1" source="2"><mxGeometry relative="1" as="geometry"><mxPoint x="440" y="90" as="targetPoint"/></mxGeometry></mxCell></root>';
                     var doc = mxUtils.parseXml(xml);
                    var codec = new mxCodec(doc);
                    var elt = doc.documentElement.firstChild;
                    var cells = [];
                    while (elt != null){                
                      cells.push(codec.decodeCell(elt));
                        graph.refresh();
                      elt = elt.nextSibling;
                    }

                this.graph.addCells(cells);

如果您有任何问题，请告诉我。

【讨论】：

感谢 Vishal 的回答。你拯救了我的一天。 :)

【解决方案3】：

我在 Java 中使用 mxGraph 进行基于命令行的集成，这就是我发现的

    mxGraph graph = new mxGraph();      
    String strXML = 
    mxUtils.readFile("sample.xml");
    Document xmlGraphDoc = mxXmlUtils.parseXml(strXML);
    mxCodec codec = new mxCodec(xmlGraphDoc);       
    Object o;
    o = codec.decode(xmlGraphDoc.getDocumentElement());
    graph.setModel((mxGraphModel)o);
    mxGraphModel model = (mxGraphModel)graph.getModel();

下面是我的示例 XML

<mxGraphModel dx="1422" dy="794" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
  <root>
    <mxCell id="0" />
    <mxCell id="1" parent="0" />
    <mxCell id="7kiFW_6nxtc_rd8VOYzV-1" value="&lt;p style=&quot;margin: 0px ; margin-top: 6px ; text-align: center&quot;&gt;&lt;b&gt;Driver&lt;/b&gt;&lt;/p&gt;&lt;hr&gt;&lt;p style=&quot;margin: 0px ; margin-left: 8px&quot;&gt;&lt;br&gt;&lt;/p&gt;" style="align=left;overflow=fill;html=1;dropTarget=0;" parent="1" vertex="1">
       <mxGeometry x="110" y="90" width="600" height="340" as="geometry" />
    </mxCell>
  </root>
</mxGraphModel>

【讨论】：