编码为XML时，mxGraph中的边缘未显示源和目标

Question

我正在将mxGraph用于需要将图形编码为XML并在需要时加载它的应用程序。

我正在使用以下代码对图形进行编码

const encoder = new mxCodec();
const result = encoder.encode(graph.getModel());
const xml = mxUtils.getXml(result, true);
console.log(xml, "encoded graph xml");

使用以下代码设置mxGraph

const graph = new mxGraph(this.graphContainer.nativeElement);
const parent = graph.getDefaultParent();
graph.setConnectable(true);
graph.setAllowDanglingEdges(false);
graph.getModel().beginUpdate();
const source = graph.insertVertex(parent, '1', 'Node 1', 10, 10, 200, 100, "shape=image;image=assets/images/ellipse.svg");
const target = graph.insertVertex(parent, '2', 'Node 2', 200, 200, 200, 200, "shape=image;image=assets/images/circle.svg");
graph.insertEdge(parent, '12', 'hi', source, target, 'strokeColor=black;');
graph.getModel().endUpdate();

我得到的结果是

<mxGraphModel><root><mxCell id="0"/><mxCell id="1"/><mxCell value="Node 1" style="shape=image;image=assets/images/ellipse.svg" id="2" vertex="1"><mxGeometry x="10" y="10" width="200" height="100" as="geometry"/></mxCell><mxCell value="Node 2" style="shape=image;image=assets/images/circle.svg" id="3" vertex="1"><mxGeometry x="200" y="200" width="200" height="200" as="geometry"/></mxCell><mxCell value="hi" style="strokeColor=black;" id="12" edge="1"><mxGeometry relative="1" as="geometry"/></mxCell></root></mxGraphModel>

上面的XML有一个带有edge =“ 1”的mxCell元素，但是该元素缺少源和目标。

我不知道我在做什么错。我关注了https://jgraph.github.io/mxgraph/docs/js-api/files/io/mxCodec-js.html文档。