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

最新推荐文章于 2023-02-21 11:51:22 发布
最新推荐文章于 2023-02-21 11:51:22 发布
阅读量5.6k 收藏 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
JJ_nan的博客
09-30 2573
1.首先，什么是mxcell：根据mxgraph的js部分的API，我们得知，mxCell就是在图中那些顶点和边的组合，也就是流程图中的图标和连线之类的。这些mxcell需要画在一个面板中，这个面板叫做mxgraph： Java代码 收藏代码 container = document.getElementById(‘lala’); var model = new mxGraphModel();
mxgraph点击事件java_mxGraph 工具栏按钮事件大全(edit的action执行代码汇总，中文，翻译，大全)...
weixin_35638013的博客
03-02 755
直接用editor.execute(action);进行调用就ok。action就是下面的名字。save:保存。print：打印。show：。exportImage：导出图片。refresh：刷新。cut：剪切。copy：复制。paste：粘贴。delete：删除。group：分组。ungroup：解除分组。removeFromParent：。undo:撤销操作。redo:前进操作。zoomIn：...
Mxgraph 使用教程（3）：本地引入mxgraph和 vue中引入mxgraph
qq_43955202的博客
08-07 5516
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
Mxgraph 使用教程（2）：mxgraph常用方法介绍
qq_43955202的博客
08-07 6803
1.mxgraph常用包（这个js类库被分成了8个包。） 1. 最上层的mxClient类包括或者动态导入了其他的包。当前的版本存储在maxClient.VERSION中。 2. mxEditor包提供了图表编辑器相关的类实现。入口函数式mxEditor。 3.view和model包实现了图表组件。他引用的mxGraphModel包含了mxCells和缓存了mxGraphView中的cells的状态。 4.mxCellRender基于mxStylesheet中的定义来渲染cells的外观。mxUndoMa
mxGraph节点图形设置
徐志摩的博客
10-16 7944
不积跬步，无以至千里.... ------节点样式设置 1、如何设节点颜色？ 通过属性fillColor（填充色）、gradientColor（渐变色），设为一样的颜色就是节点颜色了。 2、如何设置透明颜色？ 在配置文件中none可设为默认颜色，transparent可设透明颜色 3、节点不可改变大小 0否，1是 4、节点与连线紧密连接，无空隙
mxgraph进阶(三)Web绘图——mxGraph项目实战(精华篇)
热门推荐
IT全栈 华强工作室
06-14 7万+
Web绘图——mxGraph项目实战(精华篇)需求 由于小论文实验需求，需要实现根据用户日志提取出行为序列，然后根据行为序列生成有向图的形式，并且连接相邻动作的弧上标有执行此次相邻动作的频次，每个动作另附有一个数据集，这样有向图加数据集就构成了用户交互图。为此，自己想到了mxGraph，遂决定学习之。起步 此次项目实战是受阅读参考文献[1]启发，并在其图形布局实例基础上进行。其
Mxgraph 使用教程（1）：介绍mxgraph
qq_43955202的博客
08-07 1万+
1.mxgraph邂逅(×) 折磨（√） 楼主暑假实习，项目组需要开发一款标注系统，mentor要求使用nuxt+mxgraph来实现标注系统，所以就开始学习mxgraph，然而百度一下，我就蒙蔽了，这个框架国内确实很少用，并且查询了许多人的摆弄可，感觉都是一些基本的教学，自己摸索了很久，大概花了一个多月把项目搞定了，现在将自己的遇到的问题以及解放方法分享给大家。 2.mxgraphs介绍 官方文档： mxGraph是一系列以不同技术开发的工具库，旨在提供显示交互式的 图表和图形的应用程序的功能。 请
mxGraph实战（二）
进一步，有一步的欢喜。
06-22 2576
继mxGraph（一）的学习实践，我最近有根据官方的实例实现了图中画布的大小改变，还可以增加右上角的概览窗口。 背景：react+mxGraph. 要求: 实现画布中每个控件有图标，label。 画布可放大，缩小，还原，有个概览窗口。 鼠标移入有提示文字（已经实现：mxGraph学习（一）） 首先，来看看成果图： 原图： 放大后的： 缩小后的： 主要的代码： 首先初始化一些mxGraph的样式等参数： ...
mxgraph整合vue入门和事件处理
Leonards_1998的博客
02-21 1194
mxgraph的事件处理机制/自定义事件/事件传递参数
mxgraph 之 节点样式设置
文艺IT女青年
02-01 3750
1、如何设节点颜色？ 通过属性fillColor（填充色）、gradientColor（渐变色），设为一样的颜色就是节点颜色了。 2、如何设置透明颜色？ 在配置文件中none可设为默认颜色，transparent可设透明颜色 3、节点不可改变大小 0否，1是 4、节点与连线紧密连接，无空隙 5、节点颜色渐变方向？ 6、如果不用配置文件？ 你可以通过cell.set...
mxgraph如何实现拓扑图中节点闪烁或节点边框闪烁
06-25
mxgraph如何实现拓扑图中节点闪烁或节点边框闪烁的功能，模拟某些节点出现故障时候图元闪烁。
mxgraph右键菜 css样式修改
06-29
mxgraph右键菜单样式定制，可以修改背景颜色，分隔条的样式等
mxGraph插件，java代码xml导出成图片
11-28
在这个场景中，我们需要利用mxGraph前端插件来绘制流程图，并通过Java后端将XML数据转换为图片。 在前端部分，mxGraph允许用户通过JavaScript代码动态构建图形，这些图形可以是流程图、组织结构图等。用户可以...
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入门 之 mxcell的操作方法
u014538198的专栏
03-26 7999
上回说到ExtJs与mxgraph的结合，掌握这些后，我们便可以说说怎么操作mxcell  1.首先，神马是mxcell：根据mxgraph的js部分的API，我们得知，mxCell就是在图中那些顶点和边的组合，也就是流程图中的图标和连线之类的。这些mxcell需要画在一个面板中，这个面板叫做mxgraph：  Java代码   "lala">   ******
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、付费专栏及课程。

余额充值