Mxgraph 使用教程（9）：mxgraph根据需求数据生成对应mxgraph图

最新推荐文章于 2026-03-21 01:39:51 发布

原创

最新推荐文章于 2026-03-21 01:39:51 发布 · 3.8k 阅读

收录于

本文详细介绍了如何使用mxGraph库生成包含节点和边的图形，包括准备工作、模拟数据生成、节点与边的创建函数，以及最终图形展示的全过程。

本文将讲解如何按照对应的数据生成mxgraph图形

1.准备工作

2.模拟数据

 mxgraphData: [
        {
   
   
          nodesList: [
            [0, "宝鸡市"],
            [1, "渭南市"],
            [2, "西安市"],
            [3, "汉中市"],
            [4, "安康市"],
          ],
          edgesList: [
            [0, "200Km", 1],
            [1, "300km", 2],
            [1, "75Km", 3],
            [3, "100Km", 4],
            [4, "90Km", 5],
          ],
        },
      ],

3.生成节点的函数

/**
     * 生成节点
     */
    createNodes(graph, parent) {
   
   
      //遍历mxgraphData生成节点

      var len = this.mxgraphData[0].nodesList.length;

      for (var i = 0; i < len; i++) {
   
   
        let text = this.mxgraphData[0].nodesList[i][1];
        let id = `node${
   
   this.mxgraphData[0].nodesList[i][0]}`;
        var node = graph.insertVertex(
          parent,
          id,
          text,
          0,
          0,
          150,