这是一个 React 项目，我正在尝试将 XML 转换为 MxGraph。
PFB :- 我拥有的代码
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import {
mxGraph,
mxRubberband,
mxKeyHandler,
mxClient,
mxUtils,
mxEvent
} from 'mxgraph-js'
// import axios from 'axios'
import parser from 'fast-xml-parser'
import '../../common.css'
import '../../mxgraph.css'
class mxGraphGridAreaEditor extends Component {
constructor (props) {
super(props)
this.state = {
graph: {},
layout: {},
json: '',
dragElt: null,
createVisile: false,
currentNode: null,
currentTask: ''
}
this.LoadGraph = this.LoadGraph.bind(this)
}
componentDidMount () {
const xml = `<mxGraphModel dx='2221' dy='774' grid='1' gridSize='10' guides='1' tooltips='1' connect='1' arrows='1' fold='1' page='1' pageScale='1' pageWidth='827' pageHeight='1169' math='0' shadow='0'>
<root>
<mxCell id='0'/>
<mxCell id='1' parent='0'/>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-7' value='<b style="font-size: 20px;">Scorecard</b>'
style='rounded=0;whiteSpace=wrap;html=1;fillColor=#E6E6E6;fontSize=20;verticalAlign=top;strokeColor=none;' parent='1' vertex='1'>
<mxGeometry x='-230' y='10' width='240' height='800' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-1' value='KPA' style='rounded=0;whiteSpace=wrap;html=1;verticalAlign=top;fontStyle=1;strokeColor=none;fontSize=20;fillColor=#CCCCCC;' parent='1' vertex='1'>
<mxGeometry x='10' y='10' width='240' height='800' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-2' value='<b style="font-size: 20px;">Domain</b>' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#E6E6E6;fontSize=20;verticalAlign=top;strokeColor=none;' parent='1' vertex='1'>
<mxGeometry x='250' y='10' width='240' height='800' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-3' value='Cluster' style='rounded=0;whiteSpace=wrap;html=1;verticalAlign=top;fontStyle=1;strokeColor=none;fontSize=20;fillColor=#CCCCCC;' parent='1' vertex='1'>
<mxGeometry x='490' y='10' width='240' height='800' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-4' value='<b style="font-size: 20px;">KPI</b>' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#E6E6E6;fontSize=20;verticalAlign=top;strokeColor=none;' parent='1' vertex='1'>
<mxGeometry x='730' y='10' width='240' height='800' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-15' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-13' target='y3w0JNk_32n-TRd_Wrkm-5' edge='1'>
<mxGeometry width='50' height='50' relative='1' as='geometry'>
<mxPoint x='-160' y='450' as='sourcePoint'/>
<mxPoint x='-110' y='400' as='targetPoint'/>
</mxGeometry>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-19' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-16' target='y3w0JNk_32n-TRd_Wrkm-13' edge='1'>
<mxGeometry width='50' height='50' relative='1' as='geometry'>
<mxPoint x='40' y='297.5' as='sourcePoint'/>
<mxPoint y='297.5' as='targetPoint'/>
</mxGeometry>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-26' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-20' target='y3w0JNk_32n-TRd_Wrkm-16' edge='1'>
<mxGeometry width='50' height='50' relative='1' as='geometry'>
<mxPoint x='280' y='297.5' as='sourcePoint'/>
<mxPoint x='240' y='297.5' as='targetPoint'/>
</mxGeometry>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-27' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-23' target='y3w0JNk_32n-TRd_Wrkm-16' edge='1'>
<mxGeometry width='50' height='50' relative='1' as='geometry'>
<mxPoint x='520' y='189.79310344827593' as='sourcePoint'/>
<mxPoint x='480' y='297.37931034482756' as='targetPoint'/>
</mxGeometry>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-38' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-34' target='y3w0JNk_32n-TRd_Wrkm-20' edge='1'>
<mxGeometry width='50' height='50' relative='1' as='geometry'>
<mxPoint x='280' y='297.5' as='sourcePoint'/>
<mxPoint x='240' y='297.5' as='targetPoint'/>
</mxGeometry>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-48' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-40' target='y3w0JNk_32n-TRd_Wrkm-23' edge='1'>
<mxGeometry width='50' height='50' relative='1' as='geometry'>
<mxPoint x='520' y='402.2068965517242' as='sourcePoint'/>
<mxPoint x='480' y='297.37931034482756' as='targetPoint'/>
</mxGeometry>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-49' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-43' target='y3w0JNk_32n-TRd_Wrkm-23' edge='1'>
<mxGeometry width='50' height='50' relative='1' as='geometry'>
<mxPoint x='530' y='412.2068965517242' as='sourcePoint'/>
<mxPoint x='490' y='307.37931034482756' as='targetPoint'/>
</mxGeometry>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-50' value='' style='group' parent='1' vertex='1' connectable='0'>
<mxGeometry x='750' y='440' width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-43' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-50' vertex='1'>
<mxGeometry width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-44' value='End To End Fault Handling Effectiveness S2' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-50' vertex='1'>
<mxGeometry width='200' height='55' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-45' value='<font style="font-size: 23px"><span>R 19 762</span><br><font style="font-size: 15px">19.8%</font></font><br>' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-50' vertex='1'>
<mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-51' value='' style='group' parent='1' vertex='1' connectable='0'>
<mxGeometry x='750' y='247.5' width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-40' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-51' vertex='1'>
<mxGeometry width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-41' value='End To End Fault Handling Effectiveness S1' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-51' vertex='1'>
<mxGeometry width='200' height='55' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-42' value='<font style="font-size: 23px"><span>R 15 544</span><br><font style="font-size: 15px">15.5%</font></font><br>' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-51' vertex='1'>
<mxGeometry x='10' y='65.5' width='180' height='70' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-52' value='' style='group' parent='1' vertex='1' connectable='0'>
<mxGeometry x='510' y='344' width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-23' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-52' vertex='1'>
<mxGeometry width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-24' value='Fault Management' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-52' vertex='1'>
<mxGeometry width='200' height='55' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-25' value='<font style="font-size: 23px"><span>R 35</span><span>&nbsp;306</span><br><font style="font-size: 15px">35.3%</font></font><br>' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-52' vertex='1'>
<mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-53' value='' style='group' parent='1' vertex='1' connectable='0'>
<mxGeometry x='750' y='58' width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-34' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-53' vertex='1'>
<mxGeometry width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-35' value='Reporting Effectiveness' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-53' vertex='1'>
<mxGeometry width='200' height='55' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-36' value='<font style="font-size: 23px"><span>R 19 500</span><br><font style="font-size: 15px">19.5%</font></font><br>' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-53' vertex='1'>
<mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-54' value='' style='group' parent='1' vertex='1' connectable='0'>
<mxGeometry x='510' y='58' width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-20' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-54' vertex='1'>
<mxGeometry width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-21' value='Reporting' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-54' vertex='1'>
<mxGeometry width='200' height='55' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-22' value='<font style="font-size: 23px"><span>R 19 500</span><br><font style="font-size: 15px">19.5%</font></font><br>' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-54' vertex='1'>
<mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-55' value='' style='group' parent='1' vertex='1' connectable='0'>
<mxGeometry x='270' y='201' width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-16' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-55' vertex='1'>
<mxGeometry width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-17' value='Common' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-55' vertex='1'>
<mxGeometry width='200' height='55' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-18' value='<font style="font-size: 23px"><span>R&nbsp;</span><span>54 806</span><br><font style="font-size: 15px">54.8%</font></font><br>' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-55' vertex='1'>
<mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-56' value='' style='group' parent='1' vertex='1' connectable='0'>
<mxGeometry x='30' y='420' width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-13' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-56' vertex='1'>
<mxGeometry width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-14' value='Process' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-56' vertex='1'>
<mxGeometry width='200' height='55' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-11' value='<font style="font-size: 23px"><span>R&nbsp;</span><span>54 806</span><br><font style="font-size: 15px">54.8%</font></font><br>' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-56' vertex='1'>
<mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-57' value='' style='group' parent='1' vertex='1' connectable='0'>
<mxGeometry x='-210' y='419.99999999999994' width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-5' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-57' vertex='1'>
<mxGeometry width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-6' value='<font style="font-size: 23px"><span>R&nbsp;</span><span>54 806</span><br><font style="font-size: 15px">54.8%</font></font><br>' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-57' vertex='1'>
<mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-12' value='Huawei RAN and Transmission O&amp;M' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-57' vertex='1'>
<mxGeometry width='200' height='55' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-62' value='' style='group' parent='1' vertex='1' connectable='0'>
<mxGeometry x='750' y='640' width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-59' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-62' vertex='1'>
<mxGeometry width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-60' value='Network Monitoring Effectiveness' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-62' vertex='1'>
<mxGeometry width='200' height='55' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-61' value='<font style="font-size: 23px"><span>R 0</span><br><font style="font-size: 15px">0.0%</font></font><br>' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-62' vertex='1'>
<mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-68' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-59' target='y3w0JNk_32n-TRd_Wrkm-65' edge='1'>
<mxGeometry width='50' height='50' relative='1' as='geometry'>
<mxPoint x='760' y='522.5' as='sourcePoint'/>
<mxPoint x='720' y='426.66666666666674' as='targetPoint'/>
</mxGeometry>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-73' value='' style='group' parent='1' vertex='1' connectable='0'>
<mxGeometry x='510' y='640' width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-65' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-73' vertex='1'>
<mxGeometry width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-66' value='Supervision' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-73' vertex='1'>
<mxGeometry width='200' height='55' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-67' value='<font style="font-size: 23px"><span>R 0</span><br><font style="font-size: 15px">0.0%</font></font><br>' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-73' vertex='1'>
<mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-74' value='' style='group' parent='1' vertex='1' connectable='0'>
<mxGeometry x='270' y='640' width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-70' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-74' vertex='1'>
<mxGeometry width='200' height='145' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-71' value='Front Office' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-74' vertex='1'>
<mxGeometry width='200' height='55' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-72' value='<font style="font-size: 23px"><span>R 0</span><br><font style="font-size: 15px">0.0%</font></font><br>' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-74' vertex='1'>
<mxGeometry x='10' y='65' width='180' height='70' as='geometry'/>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-75' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-65' target='y3w0JNk_32n-TRd_Wrkm-70' edge='1'>
<mxGeometry width='50' height='50' relative='1' as='geometry'>
<mxPoint x='760.166666666667' y='722.5' as='sourcePoint'/>
<mxPoint x='720' y='722.5' as='targetPoint'/>
</mxGeometry>
</mxCell>
<mxCell id='y3w0JNk_32n-TRd_Wrkm-76' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;exitX=0;exitY=0.5;exitDx=0;exitDy=0;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-70' target='y3w0JNk_32n-TRd_Wrkm-13' edge='1'>
<mxGeometry width='50' height='50' relative='1' as='geometry'>
<mxPoint x='280' y='284' as='sourcePoint'/>
<mxPoint x='240' y='503' as='targetPoint'/>
</mxGeometry>
</mxCell>
</root>
</mxGraphModel>
`
this.setState({ data: xml })
this.LoadGraph()
}
LoadGraph () {
var container = ReactDOM.findDOMNode(this.refs.divPenaltyGraph)
// Checks if the browser is supported
if (!mxClient.isBrowserSupported()) {
// Displays an error message if the browser is not supported.
mxUtils.error('Browser is not supported!', 200, false)
} else {
// Disables the built-in context menu
mxEvent.disableContextMenu(container)
// Creates the graph inside the given container
var graph = new mxGraph(container)
// Enables rubberband selection
new mxRubberband(graph)
var options = {
attributeNamePrefix: '',
textNodeName: '#text',
ignoreAttributes: false,
ignoreNameSpace: false,
allowBooleanAttributes: false,
parseNodeValue: true,
parseAttributeValue: true,
trimValues: true,
cdataTagName: '__cdata', // default is 'false'
cdataPositionChar: '\\c',
localeRange: '', // To support non english character in tag/attribute values.
parseTrueNumberOnly: false
}
if (parser.validate(this.state.data) === true) { // optional (it'll return an object in case it's not valid)
var jsonObj = parser.parse(this.state.data, options)
}
// Gets the default parent for inserting new cells. This is normally the first
// child of the root (ie. layer 0).
var parent = graph.getDefaultParent()
// Enables tooltips, new connections and panning
graph.setPanning(true)
graph.setTooltips(true)
graph.setConnectable(true)
graph.setEnabled(true)
graph.setEdgeLabelsMovable(false)
graph.setVertexLabelsMovable(false)
graph.setGridEnabled(true)
graph.setAllowDanglingEdges(false)
graph.getModel().beginUpdate()
try {
// mxGrapg component
var doc = mxUtils.createXmlDocument()
var node = doc.createElement('Node')
node.setAttribute('ComponentID', '[P01]')
const items = []
jsonObj.mxGraphModel.root.mxCell.forEach(cell => {
if (cell.value) {
const vertexObj = {}
let vertex = graph.insertVertex(
parent,
cell.id,
cell.value,
cell.mxGeometry.x,
cell.mxGeometry.y,
cell.mxGeometry.width,
cell.mxGeometry.height,
cell.style
)
vertexObj[cell.id] = vertex
items.push(vertexObj)
}
})
const mxCellCount = jsonObj.mxGraphModel.root.mxCell.length
for (let i = 0; i <= mxCellCount; i++) {
const cell = jsonObj.mxGraphModel.root.mxCell[i]
if (!cell.value) {
let sourceObject = items.filter(vertex => {
return Object.keys(vertex) === cell.source
})[0]
let source = sourceObject ? sourceObject[cell['source']] : null
let targetObject = items.filter(vertex => {
return Object.keys(vertex) === cell.target
})[0]
let target = targetObject ? cell['target'] : null
graph.insertEdge(
parent,
null,
'',
source,
target
)
}
}
// data
} finally {
// Updates the display
graph.getModel().endUpdate()
}
// Enables rubberband (marquee) selection and a handler for basic keystrokes
new mxRubberband(graph)
new mxKeyHandler(graph)
}
}
render () {
return (
<div className='graph-container' ref='divPenaltyGraph' id='divPenaltyGraph' />
)
}
}
export default mxGraphGridAreaEditor
请注意:- 相同的 XML 适用于 draw.io，我无法在我的代码中发现错误，因此我们将不胜感激
最佳答案
我遇到了同样的麻烦，因为我找不到将 xml 解码为图形模型的有效方法。但是这里有一个可用的解决方法:
function parseXmlToGraph(xmlDoc, graph) {
const cells = xmlDoc.documentElement.children[0].children
const parent = graph.getDefaultParent()
for (let i = 0; i < cells.length; i++) {
const cellAttrs = cells[i].attributes
if (cellAttrs.vertex) { // is vertex
const vertexName = cellAttrs.value.value
const vertexId = Number(cellAttrs.id.value)
const geom = cells[i].children[0].attributes
const xPos = Number(geom.x.value)
const yPos = Number(geom.y.value)
const height = Number(geom.height.value)
const width = Number(geom.width.value)
graph.insertVertex(parent, vertexId, vertexName, xPos, yPos, width, height)
} else if (cellAttrs.edge) { //is edge
const edgeName = cellAttrs.value.value
const edgeId = Number(cellAttrs.id.value)
const source = Number(cellAttrs.source.value)
const target = Number(cellAttrs.target.value)
graph.insertEdge(parent, edgeId, edgeName,
graph.getModel().getCell(source),
graph.getModel().getCell(target)
)
}
}
}
使用 so 就像(假设你有一个图表):
const doc = mxUtils.parseXml(myXmlString) //yields xml object
parseXmlToGraph(doc, graph)
问候
编辑
正如 nbatolov's comment 所指出的问题在于运行时窗口(全局对象)中没有这样的 mx* 函数，例如，在您的情况下，显然窗口缺少一些函数，例如 mxGraph()、mxGraphModel()、mxCodec() 等. 然后你可以在使用
运行 mxCodec 的解码功能之前将它们添加到你的窗口window.['mxCodec'] = mxgraph.mxCodec
mxgraph 是您使用 mxGraph 的函数和对象的起点。
关于javascript - 无法从提供的 XML 创建 MxGraph，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56408568/