这是一个 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/
出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits
关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。
我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-
使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta
我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为
我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject)，但我没有脚本/生成，只有脚本/rails，当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗？没有这个命令可以创建插件吗？PS:我正在使用Rails3.2.1和ruby1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布，插件生成器已经被移除。查看变更日志here.现在
我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r
我正在尝试在我的centos服务器上安装therubyracer，但遇到了麻烦。$geminstalltherubyracerBuildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingtherubyracer:ERROR:Failedtobuildgemnativeextension./usr/local/rvm/rubies/ruby-1.9.3-p125/bin/rubyextconf.rbcheckingformain()in-lpthread...yescheckingforv8.h...no***e
如何使用RSpec::Core::RakeTask初始化RSpecRake任务？require'rspec/core/rake_task'RSpec::Core::RakeTask.newdo|t|#whatdoIputinhere?endInitialize函数记录在http://rubydoc.info/github/rspec/rspec-core/RSpec/Core/RakeTask#initialize-instance_method没有很好的记录；它只是说:-(RakeTask)initialize(*args,&task_block)AnewinstanceofRake
我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳