那些遇到过的问题

无法通过提供的XML创建MxGraph

Dha*_*eda 13 javascript mxgraph reactjs

这是一个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='&lt;b style=&quot;font-size: 20px;&quot;&gt;Scorecard&lt;/b&gt;' 
        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='&lt;b style=&quot;font-size: 20px;&quot;&gt;Domain&lt;/b&gt;' 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='&lt;b style=&quot;font-size: 20px;&quot;&gt;KPI&lt;/b&gt;' 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='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R 19 762&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;19.8%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' 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='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R 15 544&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;15.5%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' 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='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R 35&lt;/span&gt;&lt;span&gt;&amp;nbsp;306&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;35.3%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' 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='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R 19 500&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;19.5%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' 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='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R 19 500&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;19.5%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' 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='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R&amp;nbsp;&lt;/span&gt;&lt;span&gt;54 806&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;54.8%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' 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='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R&amp;nbsp;&lt;/span&gt;&lt;span&gt;54 806&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;54.8%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' 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='&lt;font style=&quot;font-size: 23px&quot;&gt;&lt;span&gt;R&amp;nbsp;&lt;/span&gt;&lt;span&gt;54 806&lt;/span&gt;&lt;br&gt;&lt;font style=&quot;font-size: 15px&quot;&gt;54.8%&lt;/font&gt;&lt;/font&gt;&lt;br&gt;' 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;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;f

Gui*_*rst 2

我遇到了同样的问题，因为我找不到将 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)
      )
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

使用 so 会像（假设你有一个图表）：

const doc = mxUtils.parseXml(myXmlString) //yields xml object
parseXmlToGraph(doc, graph)
Run Code Online (Sandbox Code Playgroud)

问候

编辑

正如nbatolov 的评论问题所指出的那样，事实上，运行时窗口（全局对象）中没有这样的 mx* 函数，例如，在您的情况下，显然，窗口缺少一些函数，例如 mxGraph()、mxGraphModel()、 mxCodec() 等。然后您可以在运行 mxCodec 的解码函数之前将它们添加到窗口中

window.['mxCodec'] = mxgraph.mxCodec
Run Code Online (Sandbox Code Playgroud)

其中 mxgraph 是使用 mxGraph 函数和对象的起点。

归档时间：

查看次数：

211 次

最近记录：

6 年，6 月 前
相关归档
为什么以及何时使用angular.copy？(深拷贝) 133
在node.js中加载并执行外部js文件,可以访问局部变量吗？ 124
Bootstrap模态:关闭当前,打开新的 74
如何使用AngularJS从JSON源填充选择下拉列表？ 63
Javascript到csv导出编码问题 51
Module.createRequire 中的错误不是函数 32
本机中的自定义警报对话框？ 13
ReactQuery - useInfiniteQuery 重新获取问题 11
如何使用 Typescript 从 mui 扩展调色板 9
如何在 mxgraph 中验证从目标到源的传入边缘 6
难疑归档
在C#中将int转换为枚举 3015
什么是尾递归？ 1602
如何在Vim中进行不区分大小写的搜索 1579
如何在所有浏览器中控制网页缓存？ 1474
如何在Xcode 4中"添加现有框架"？ 1426
jQuery document.createElement等价？ 1226
获取数据库中所有表的大小 1180
JavaScript中是否有常量？ 1118
Visual Studio中的构建解决方案,重建解决方案和清洁解决方案之间的区别？ 1081
在Notepad ++中将制表符转换为空格 1042