[英]mxGraph: Create graph with XML
我正在嘗試從 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="<img src="printer.png" onClick="printer()" style="width:40px;height:40px;"><img>" 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 加載到圖中時,它被視為兩個節點,這意味着它對每個節點迭代兩次。 請有人幫助我我做錯了什么。
試試這個
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);
如果您有任何問題,請告訴我。
如果您使用的是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));
我在 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="<p style="margin: 0px ; margin-top: 6px ; text-align: center"><b>Driver</b></p><hr><p style="margin: 0px ; margin-left: 8px"><br></p>" 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.