Mxgraph使⽤教程（11）：mxgraph⼿动添加节点和边（节点和边点击事件）,
并按照。。。
上⽂我们介绍了，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 {
mxClient,
mxCodec,
mxUtils,
mxConstants,
mxPerimeter,
mxHierarchicalLayout,
mxCompactTreeLayout,
}= mxgraph;
export default {
data(){
return{
v_graph:"",
v_parent:"",
};
},
methods:{
mxGraph(){
if(!mxClient.isBrowserSupported()){
// 判断是否⽀持mxgraph
<("Browser is not supported!",200,false);
}else{
// 在容器中创建图表
let container = ElementById("graphContainer");
var graph =new mxGraph(container);
var parent = DefaultParent();
this.v_graph = graph;
this.v_parent = parent;
var layout =new mxHierarchicalLayout(graph);
try{
}finally{
// Updates the display
}
}
},
},
mounted(){
},
};
</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 00250px;
}
.Oinput {
width:1000px;
height:100px;
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,
borderbox"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);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。