Mxgraph 使用教程（11）：mxgraph手动添加节点和边（节点和边点击事件）,并按照要求格式导出数据

mxGraph动态生成与数据导出

最新推荐文章于 2025-09-19 09:42:00 发布

原创

最新推荐文章于 2025-09-19 09:42:00 发布 · 7.3k 阅读

21 ·

CC 4.0 BY-SA版权

上文我们介绍了，mxgraph如何在页面不刷新的情况下，通过请求不同文件生成不同的mxgraph图，本文我们将讲述mxgraph手动添加节点和边，并且按照原本数据格式导出数据。

1.准备工作

在这里插入图片描述

准备工作代码

<template>
  <div>
    <div class="Oinput">
      <input type="text" placeholder="请输入对应的城市名称......" />
      <button>生成节点</button>
      <button>保存数据</button>
    </div>
    <div id="graphContainer"></div>
  </div>
</template>

<script>
import mxgraph from "./mxgraph";
const {
   
   
  mxGraph,
  mxClient,
  mxCodec,
  mxUtils,
  mxConstants,
  mxPerimeter,
  mxHierarchicalLayout,
  mxCompactTreeLayout,
} = mxgraph;

export default {
   
   
  data() {
   
   
    return {
   
   
      v_graph: "",
      v_parent: "",
    };
  },

  methods: {
   
   
    mxGraph() {
   
   
      if (!mxClient.isBrowserSupported()) {
   
   
        // 判断是否支持mxgraph
        mxUtils.error("Browser is not supported!", 200, false);
      } else {
   
   
        // 在容器中创建图表
        let container = document.getElementById("graphContainer");

        var graph = new mxGraph(container);
        var parent = graph.getDefaultParent();
        this.v_graph = graph;
        this.v_parent = parent;

        graph.getModel().beginUpdate();

        var layout = new mxHierarchicalLayout(graph);

        try {
   
   
          layout.execute(parent);
        } finally {
   
   
          // Updates the display
          graph.getModel().endUpdate();
        }
      }
    },
  },

  mounted() {
   
   
    this.mxGraph();
  },
};
</script>
<style>
#graphContainer {
   
   
  width: 1000px;
  height: 700px;
  border: 3px solid rgb(194, 185, 185);
  background-image: url("../assets/grid.gif");
  margin: auto;
  box-sizing: border-box;
  padding: 100px 0 0 250px;
}

.Oinput {
   
   
  width: 1000px;
  height: 100px;
  margin: auto;
  border: 3px solid rgb(194, 185, 185);
  text-align: center;
  line-height: 100px;
  box-sizing: border-box;
}

input {
   
   
  width: 400px;
  height: 40px;
  box-sizing: border-box;
  font-size: 17px;
}

button {
   
   
  width: 100px;
  height: 40px;
  box-sizing: border-box;
  margin-right: 20px;
}
</style>

在这里插入图片描述
准备工作完成。

2.需求分析

input中输入城市名，生成节点。在mxgraph中完成城市交通图。

使用v-model获取input输入数据

<input v-model="v_text" type="text" placeholder="请输入对应的城市名称......" />
      <button @click="createNewNode(v_graph,v_parent)">生成节点</button>
      <button>保存数据</button>

生成节点，最后将input赋值为空

/**
     * 生成节点函数
     */
    createNewNode(graph,parent) {
   
   
      let text = this.v_text;
      let id = `node${
     
     this.v_id ++ }`;
      var node = graph.insertVertex(
        parent

最低0.47元/天解锁文章