使用 mxgraph 从现有的 XML 字符串构造和呈现图形

Question

我正在尝试使用 mxgraph 在 React 组件内部呈现图形（类似于有人使用mxgraph-js fork创建的这个示例）。我希望使用先前通过 mxgraph图形编辑器工具创建的现有 XML 字符串构建此图。

当这个 React 组件 (DisplayGraph) 在我的 React 应用程序中构建和呈现时，图表永远不会出现。尽管它似乎确实在初始化图形对象，因为容器 div (id "divGraph") 在右键单击时没有上下文菜单，每个mxEvent.disableContextMenu(container). 当我点击并拖动空的 div 时，我可以看到一个新的 divmxRubberband出现并在我拖动光标时实时更改其左/上/宽/高样式。

检查时，容器 div 在 DOM 中如下所示：

<div class="graph-container" id="divGraph" style="width: 100%; position: relative; touch-action: none;">

  <svg style="left: 0px; top: 0px; width: 100%; height: 100%; display: block; min-width: 1px; min-height: 1px;">

    <g>

      <g></g>

      <g></g>

      <g></g>

      <g></g>

    </g>

  </svg>

</div>

更改由 mxUtils 解析的 XML 字符串似乎永远不会更改 React 组件中呈现的实际图形；<g>无论我传入什么 XMLString，它似乎总是有 4 个空元素mxUtils.parseXml()。

我已经尝试了一些不同的方法，如详细的那些在这里，在这里，和文档的例子在这里，但无济于事。使用此组件时，控制台中不会出现任何错误，因此我不完全确定问题出在哪里。

所以该模块似乎正在运行，但我无法弄清楚为什么我传递的 XML 字符串mxUtils.parseXml()没有被正确解析/呈现。

Answer 1

我在我的 webpack 项目 (vuejs) 中找到了解决这个问题的方法，也许是同样的问题因为所有的 mx 对象都必须在 window dict 中例如 window['mxCell'] = mxCell所以我写这个const {mxCell .......} = mxgraph({&nbsp; mxImageBasePath: ..... })// register all object&nbsp;window['mxClient'] = mxClientwindow['mxGraph'] = mxGraphwindow['mxUtils'] = mxUtilswindow['mxEvent'] = mxEventwindow['mxVertexHandler'] = mxVertexHandlerwindow['mxConstraintHandler'] = mxConstraintHandlerwindow['mxConnectionHandler'] = mxConnectionHandlerwindow['mxEdgeHandler'] = mxEdgeHandlerwindow['mxCellHighlight'] = mxCellHighlightwindow['mxEditor'] = mxEditorwindow['mxGraphModel'] = mxGraphModelwindow['mxKeyHandler'] = mxKeyHandlerwindow['mxStencilRegistry'] = mxStencilRegistrywindow['mxConstants'] = mxConstantswindow['mxGraphView'] = mxGraphViewwindow['mxCodec'] = mxCodecwindow['mxToolbar'] = mxToolbarwindow['mxRubberband'] = mxRubberbandwindow['mxShape'] = mxShapewindow['mxImage'] = mxImagewindow['mxConnectionConstraint'] = mxConnectionConstraintwindow['mxPoint'] = mxPointwindow['mxDivResizer'] = mxDivResizerwindow['mxGraphHandler'] = mxGraphHandlerwindow['mxPerimeter'] = mxPerimeterwindow['mxPolyline'] = mxPolylinewindow['mxCellState'] = mxCellStatewindow['mxOutline'] = mxOutlinewindow['mxCell'] = mxCellwindow['mxGeometry'] = mxGeometrywindow['mxGuide'] = mxGuidewindow['mxDefaultKeyHandler'] = mxDefaultKeyHandlerwindow['mxDefaultToolbar'] = mxDefaultToolbarwindow['mxXmlCanvas2D'] = mxXmlCanvas2Dwindow['mxImageExport'] = mxImageExport// your code here&nbsp;