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

最新推荐文章于 2024-05-16 00:20:39 发布
最新推荐文章于 2024-05-16 00:20:39 发布
阅读量5.7k 收藏 18
点赞数 3
分类专栏： 前端可视化MXgraph
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43955202/article/details/107841659
版权

上文我们介绍了，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,
        id,
        text,
        0,
        0,
        150,
        40,
        "fillColor=#3CAEA3;strokeColor=white;fontStyle=1;fontColor=white;rounded=1;fontSize=15;"
      );

      this.v_text = '';
    },
  • 点击生成节点成功
    在这里插入图片描述

3，生成多个节点连接成为流程图

  • 设置节点可连接，同时避免无效连线
//设置节点可连接
        graph.setConnectable(true);
		graph.setTooltips(true);
		graph.setAllowDanglingEdges(false);
		graph.setMultigraph(false);
  • 双击连接线 即可编辑 label
    在这里插入图片描述

4.节点和连线点击事件

  • 第一步在mxgraph容器内步 禁用鼠标右键
//禁止在mxgraph图中使用鼠标右键
        mxEvent.disableContextMenu(document.getElementById("graphContainer"));
  • 第二步:重写鼠标事件
 graph.popupMenuHandler.factoryMethod = function (menu, cell, evt) {
          // 判断是节点还是边

          if(cell){
            //对于节点而言，它的target以及source均为null
          if(cell.source){
            alert('当前选中是边：' + cell.value)
            //进行其他操作
          }else{
            alert('当前选中是节点：' + cell.value)
            //进行其他操作
          }
          }

          
        }

效果演示：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5.所有代码

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

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

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

  methods: {
    /**
     * 生成节点函数
     */
    createNewNode(graph, parent) {
      let text = this.v_text;
      let id = `node${this.v_id ++ }`;
      var node = graph.insertVertex(
        parent,
        id,
        text,
        0,
        0,
        150,
        40,
        "fillColor=#3CAEA3;strokeColor=white;fontStyle=1;fontColor=white;rounded=1;fontSize=15;"
      );

      this.v_text = "";
    },

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

        //禁止在mxgraph图中使用鼠标右键
        mxEvent.disableContextMenu(document.getElementById("graphContainer"));
        var graph = new mxGraph(container);
        //设置节点可连接
        graph.setConnectable(true);
        graph.setTooltips(true);
        graph.setAllowDanglingEdges(false);
        graph.setMultigraph(false);
        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();
        }

        //鼠标右键事件
        graph.popupMenuHandler.factoryMethod = function (menu, cell, evt) {
          // 判断是节点还是边

          if (cell) {
            //对于节点而言，它的target以及source均为null
            if (cell.source) {
              alert("当前选中是边：" + cell.value);
              //进行其他操作
            } else {
              alert("当前选中是节点：" + cell.value);
              //进行其他操作
            }
          }
        };
      }
    },
  },

  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;
}

.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>

6.按照要求数据格式导出图中数据

  • 要求数据格式
mxgraphData: [
		  {
			nodesList:[
			  [0,'Hello'],
			  [1,'Mxgraph']
			],
			edgesList:[
			  [0,'label',1]
			]
		  }
		],
  • 第一步：获取mxgraph容器内步所有子节点和边
    在这里插入图片描述
  • 获取图中数据
    在这里插入图片描述
DataPush(graph){
      // 获取mxgraph容器内步所有子节点和边
      console.log(graph.getModel().root.children[0].children)
    },
  • 处理数据
/**
     * 按照要求导出数据
     */
    DataPush(graph){
      var newMXgraphData = [
        {
          nodesList:[],
          edgesList:[]
        }
      ]
      // 获取mxgraph容器内步所有子节点和边
      var cellList = graph.getModel().root.children[0].children;
      // 处理数据：
      for(var i = 0 ; i < cellList.length; i++){
          // 区分节点和边
          if(cellList[i].source){
            // 是边
              var arr = [];
              //获取连接起点节点id
              var startId = Number(cellList[i].source.id.slice(4,5))
              var label = cellList[i].value;
              var endId = Number(cellList[i].target.id.slice(4,5))
              arr.push(startId)
              arr.push(label)
              arr.push(endId)
              newMXgraphData[0].edgesList.push(arr);
          }else{
            //是节点
            var arr = [];
            // 保存节点id
            var nodeId = Number(cellList[i].id.slice(4,5));
            var nodeValue = cellList[i].value;
            arr.push(nodeId)
            arr.push(nodeValue)
            newMXgraphData[0].nodesList.push(arr);
          }
      }
      console.log(newMXgraphData);
      return newMXgraphData;
    },

在这里插入图片描述

7.所有代码示例：

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

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

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

  methods: {
    /**
     * 生成节点函数
     */
    createNewNode(graph, parent) {
      let text = this.v_text;
      let id = `node${this.v_id ++ }`;
      var node = graph.insertVertex(
        parent,
        id,
        text,
        0,
        0,
        150,
        40,
        "fillColor=#3CAEA3;strokeColor=white;fontStyle=1;fontColor=white;rounded=1;fontSize=15;"
      );

      this.v_text = "";
    },

    /**
     * 按照要求导出数据
     */
    DataPush(graph){
      var newMXgraphData = [
        {
          nodesList:[],
          edgesList:[]
        }
      ]
      // 获取mxgraph容器内步所有子节点和边
      var cellList = graph.getModel().root.children[0].children;
      // 处理数据：
      for(var i = 0 ; i < cellList.length; i++){
          // 区分节点和边
          if(cellList[i].source){
            // 是边
              var arr = [];
              //获取连接起点节点id
              var startId = Number(cellList[i].source.id.slice(4,5))
              var label = cellList[i].value;
              var endId = Number(cellList[i].target.id.slice(4,5))
              arr.push(startId)
              arr.push(label)
              arr.push(endId)
              newMXgraphData[0].edgesList.push(arr);
          }else{
            //是节点
            var arr = [];
            // 保存节点id
            var nodeId = Number(cellList[i].id.slice(4,5));
            var nodeValue = cellList[i].value;
            arr.push(nodeId)
            arr.push(nodeValue)
            newMXgraphData[0].nodesList.push(arr);
          }
      }
      console.log(newMXgraphData);
      return newMXgraphData;
    },

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

        //禁止在mxgraph图中使用鼠标右键
        mxEvent.disableContextMenu(document.getElementById("graphContainer"));
        var graph = new mxGraph(container);
        //设置节点可连接
        graph.setConnectable(true);
        graph.setTooltips(true);
        graph.setAllowDanglingEdges(false);
        graph.setMultigraph(false);
        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();
        }

        //鼠标右键事件
        graph.popupMenuHandler.factoryMethod = function (menu, cell, evt) {
          // 判断是节点还是边

          if (cell) {
            //对于节点而言，它的target以及source均为null
            if (cell.source) {
              alert("当前选中是边：" + cell.value);
              //进行其他操作
            } else {
              alert("当前选中是节点：" + cell.value);
              //进行其他操作
            }
          }
        };
      }
    },
  },

  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;
}

.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>
七月是我的生日
关注
  • 3
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
mxGraph是一个完整的客户端JavaScript图表库
08-10
mxGraph是一个完整的客户端JavaScript图表库
mxGraph插件，java代码xml导出成图片
11-28
在这个场景中，我们需要利用mxGraph前端插件来绘制流程图，并通过Java后端将XML数据转换为图片。 在前端部分，mxGraph允许用户通过JavaScript代码动态构建图形，这些图形可以是流程图、组织结构图等。用户可以...
【Mxgraph】Vue中使用mxgraph开发流程图工具
weixin_39085822的博客
03-11 2万+
1.什么是mxgraph mxGraph是一个JavaScript图表库，可以快速创建交互式图形和图表应用程序，这些应用程序可以在其供应商支持的任何主要浏览器中运行。mxGraph 提供图形绘制、图形可视化、图形交互、图形布局、图形分析等能力， 适用于工作流程图、BPMN图、网络图、UML图、循环图、组织结构图、MindMap图、机架图、甘特图、信息图、平面图等绘制。 mxGraph在2005年创建，作为商业项目一直持续到2016年，2016年创建者以Apache 2.0开源协议在GitHub上公布源码。
mxgraph进阶(三)Web绘图——mxGraph项目实战(精华篇)_mxgraph 设置动画效果
最新发布
2401_84437170的博客
05-16 553
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】catch (e)throw e;finally//默认值是 6, 1.5, 20});else// 开启更新事务var w = 30;var h = 30;try。
mxGraph进阶(一)mxGraph教程-开发入门指南
热门推荐
IT全栈 华强工作室
05-01 11万+
mxGraph教程-开发入门指南概述 mxGraph是一个JS绘图组件适用于需要在网页中设计/编辑Workflow/BPM流程图、图表、网络图和普通图形的Web应用程序。mxgraph下载包中包括用javascript写的前端程序,也包括多个和后端程序(java/C#等)集成的例子。以下是mxgraph应用的几个例子。（你可以到www.longboo.com的主页下载mxgraph和更多
Mxgraph 使用教程（1）：介绍mxgraph
qq_43955202的博客
08-07 1万+
1.mxgraph邂逅(×) 折磨（√） 楼主暑假实习，项目组需要开发一款标注系统，mentor要求使用nuxt+mxgraph来实现标注系统，所以就开始学习mxgraph，然而百度一下，我就蒙蔽了，这个框架国内确实很少用，并且查询了许多人的摆弄可，感觉都是一些基本的教学，自己摸索了很久，大概花了一个多月把项目搞定了，现在将自己的遇到的问题以及解放方法分享给大家。 2.mxgraphs介绍 官方文档： mxGraph是一系列以不同技术开发的工具库，旨在提供显示交互式的 图表和图形的应用程序的功能。 请
Mxgraph 使用教程（9）：mxgraph根据需求数据生成对应mxgraph图
qq_43955202的博客
08-07 3059
本文将讲解如何按照对应的数据生成mxgraph图形 1.准备工作 2.模拟数据 mxgraphData: [ { nodesList: [ [0, "宝鸡市"], [1, "渭南市"], [2, "西安市"], [3, "汉中市"], [4, "安康市"], ], edgesList: [ .
Mxgraph 使用教程（3）：本地引入mxgraph和 vue中引入mxgraph
qq_43955202的博客
08-07 5685
1.本地引入mxgraph 第一步：下载mxgraph库 github地址：https://github.com/jgraph/mxgraph 第二步：clone项目 打开项目-》进入javascript 第三步：本地使用mxgraph 一个官方示例demo: <html> <head> <title>Hello, World! example for mxGraph</title> <!-- Sets the basepath for the
Vue-cli3生成的Vue项目加载Mxgraph方法示例
10-15
这段配置告诉Webpack如何处理`mxClient.js`，并导出Mxgraph中的关键类。同时设置了别名`@`和`@assets`，便于在项目中引用资源。 现在，你可以开始在组件中使用Mxgraph。以`HelloWorld.vue`为例，替换其内容为以下...
mxgraph_mxgraph_slow3ya_绘图工具_mxclient_
10-03
4. **API友好**：mxgraph提供了丰富的JavaScript API，开发者可以轻松地控制图形的每一个细节，如添加、删除、修改节点和边，以及处理用户事件。 5. **跨平台**：由于它是基于Web的，因此可以在任何支持现代浏览器...
基于mxGraph来做的一款web的绘制流程图的javascript库工具mxGraph_gpx.zip
12-06
2. **交互性**：用户可以通过鼠标操作（如拖放、点击、缩放、旋转）来创建、移动和修改图形节点和边。 3. **图形模型**：它有一个强大的图形模型，可以表示各种形状，如矩形、椭圆、连接线，并支持自定义形状。 4. *...
mxgraph editor
03-09
3. **导出与导入**：可以将图表导出为常见的图像格式（如PNG、SVG），或者导出为JSON等数据格式，方便存储和分享。 4. **API扩展**：提供丰富的API和插件机制，允许开发者根据需求扩展功能，如集成其他工具或服务。...
mxGraph学习（一）
Caramel_biscuit的博客
07-18 1369
mxGraph绘制的图片主要是由“点”（还包括矩形、圆形等基本形状）和“边”组成。mxGraph除绘制图片外，还提供编辑功能（拖拽、选择、复制、调整大小等）。自动排列图形元素，mxGraph提供多种布局方式，比如树形布局、栈形布局、圆形布局。与图相关的算法分析。...
Mxgraph 使用教程（2）：mxgraph常用方法介绍
qq_43955202的博客
08-07 6912
1.mxgraph常用包（这个js类库被分成了8个包。） 1. 最上层的mxClient类包括或者动态导入了其他的包。当前的版本存储在maxClient.VERSION中。 2. mxEditor包提供了图表编辑器相关的类实现。入口函数式mxEditor。 3.view和model包实现了图表组件。他引用的mxGraphModel包含了mxCells和缓存了mxGraphView中的cells的状态。 4.mxCellRender基于mxStylesheet中的定义来渲染cells的外观。mxUndoMa
mxgraph学习（一）
进一步，有一步的欢喜。
06-10 1121
写在前面： 最近项目中有个模块，是需要在页面绘制体现数据从数据库到表数据的变化历史。其中有两个概念：‘数据血源’，‘影响分析’。也就是模仿kettel的呈现效果，在项目页面上直接呈现，不必打开kettel去一一查看数据的历史。大概的背景是这样。雏形： 在此基础上我还需要实现：图的可拖动，可放大缩小。以及点击事件等。 因此各种找资源学习，以下是一些学习连接： 了解mxgraph： https://www.cnblogs.com/shawWey/category/1028607.html。 .
mxgraph进阶(五)搭建mxGraph简单应用
IT全栈 华强工作室
12-31 5万+
mxgraph进阶(五)搭建mxGraph简单应用使用前准备  mxBasePath变量用来定义库资源的目录。这个变量必须在加载库前就定义好。　　　　<script type="text/javascript"> 　　mxBasePath = 'javascript/src/'; 　　</script>　　//mxClient.js包含该类库的全部所需代码。 <script
mxGraph整合vue入门和el-tree拖拽功能样例
Leonards_1998的博客
02-19 877
mxgraph引入vue中，事件功能，使用vue自定义指令来将mxgraph的拖拽功能和elementui中的树形结构el-tree进行整合，最终完成一个可以拖拽的el-tree效果。
mxgraph浅入
weixin_30909575的博客
05-29 566
mxgraph浅入 参考文献：https://www.cnblogs.com/xuxg/articles/3246206.html 1.了解 （1）如何判断需要引入mxgraph产品：过程图、工作流和BPM的可视化图表、流程图、交通或水流量、 数据库和WWW的可视化、网络和电信显示、映射应用和地理信息系统、UML图、电子线路、金融、 超大规模集成电路和社会网络、数据挖掘、生化、生态循环、实...
mxGraph开发入门指南
飞鸟Blog
10-10 2952
Overview 概述 mxGraph是一个JS绘图组件适用于需要在网页中设计/编辑Workflow/BPM流程图、图表、网络图和普通图形的Web应用程序。mxgraph下载包中包括用javescript写的前端程序,也包括多个和后端程序(java/C#等等)集成的例子。以下是mxgraph应用的几个例子。（你可以到多比图形控件例子的主页下载mxgraph ， 和更多的mxgraph实例）
mxgraph 节点添加鼠标手势
06-08
要为 mxGraph 中的节点添加鼠标手势，请使用 mxEvent.addGestureListeners() 方法。该方法将为节点添加鼠标按下、鼠标移动和鼠标抬起事件的监听器。例如，以下代码将为名为 `cell` 的节点添加按下和抬起事件的监听器： ``` var cell = graph.getSelectionCell(); mxEvent.addGestureListeners(cell, function(evt) { // 鼠标按下事件 console.log('鼠标按下：' + evt.clientX + ',' + evt.clientY); }, null, function(evt) { // 鼠标抬起事件 console.log('鼠标抬起：' + evt.clientX + ',' + evt.clientY); }); ``` 在上面的代码中，`mxEvent.addGestureListeners()` 方法的第一个参数是要添加监听器的节点，第二个参数是鼠标按下事件的回调函数，第三个参数是鼠标移动事件的回调函数，第四个参数是鼠标抬起事件的回调函数。 你可以根据需要添加需要的手势事件监听器。同时，你可以在回调函数中编写节点的交互逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值