使用mxgraph从现有XML字符串构造和呈现Graph

基础概念

MXGraph 是一个强大的 JavaScript 图形库，用于在网页上创建交互式的图表和图形。它支持从 XML 字符串构造图形，并提供了丰富的 API 来操作和呈现这些图形。

类型与应用场景

MXGraph 主要用于创建各种类型的图表，如流程图、组织结构图、网络拓扑图等。它广泛应用于项目管理、业务流程分析、教育演示等领域。

示例代码

以下是一个使用 MXGraph 从现有 XML 字符串构造和呈现 Graph 的基本示例：

<!DOCTYPE html>
<html>
<head>
    <title>MXGraph Example</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mxgraph/4.2.2/js/mxClient.min.js"></script>
</head>
<body>
    <div id="graphContainer" style="width:100%;height:600px;"></div>
    <script type="text/javascript">
        // 检查浏览器是否支持 mxClient
        if (mxClient.isBrowserSupported()) {
            // 创建一个新的图形实例
            var graph = new mxGraph(document.getElementById('graphContainer'));

            // 定义 XML 字符串
            var xmlString = '<mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="2" value="Hello, World!" style="shape=ellipse;perimeter=ellipsePerimeter" parent="1"><mxGeometry x="50" y="50" width="80" height="80" as="geometry"/></mxCell></root></mxGraphModel>';

            // 从 XML 字符串加载图形
            var doc = mxUtils.parseXml(xmlString);
            var codec = new mxCodec(doc);
            codec.decode(doc.documentElement, graph.getModel());

            // 自动布局
            var layout = new mxGraphLayout(graph, 'organic');
            layout.execute(graph.getDefaultParent());
        } else {
            alert('Your browser is not supported!');
        }
    </script>
</body>
</html>