AntV-G6手动添加节点和边，实现拓扑图的可视化展示

一小时实现简单的手动添加节点和边，实现可视化展示

在这里插入图片描述
左边：取消添加节点和边、获取的拓扑图数据、添加节点、添加边

中间：可视化展示区域
在这里插入图片描述

右边：修改节点信息、修改边信息
在这里插入图片描述

下面是一些关键代码

根据官网修改G6设置交互模式

添加节点

注册自定义事件：G6.registerBehavior

    /*** @description 注册点击添加节点*/addNode() {let _this = this;G6.registerBehavior("click-add-node", {// Set the events and the corresponding responsing function for this behaviorgetEvents() {// The event is canvas:click, the responsing function is onClickreturn {"canvas:click": "onClick",};},// Click eventonClick(ev) {const self = this;const graph = self.graph;// Add a new nodegraph.addItem("node", {x: ev.canvasX,y: ev.canvasY,id: `node-${_this.addedCount}`, // Generate the unique idlabel: `node-${_this.addedCount}`,});_this.addedCount++;},});},

添加边

注册自定义事件：G6.registerBehavior

    /*** @description 注册点击添加边*/addEdge() {G6.registerBehavior("click-add-edge", {// Set the events and the corresponding responsing function for this behaviorgetEvents() {return {"node:click": "onClick", // The event is canvas:click, the responsing function is onClickmousemove: "onMousemove", // The event is mousemove, the responsing function is onMousemove"edge:click": "onEdgeClick", // The event is edge:click, the responsing function is onEdgeClick};},// The responsing function for node:click defined in getEventsonClick(ev) {const self = this;const node = ev.item;const graph = self.graph;// The position where the mouse clicks// const point = { x: ev.x, y: ev.y };const model = node.getModel();if (self.addingEdge && self.edge) {graph.updateItem(self.edge, {target: model.id,});self.edge = null;self.addingEdge = false;} else {// Add anew edge, the end node is the current node user clicksself.edge = graph.addItem("edge", {source: model.id,target: model.id,});self.addingEdge = true;}},// The responsing function for mousemove defined in getEventsonMousemove(ev) {const self = this;// The current position the mouse clicksconst point = { x: ev.x, y: ev.y };if (self.addingEdge && self.edge) {// Update the end node to the current node the mouse clicksself.graph.updateItem(self.edge, {target: point,});}},// The responsing function for edge:click defined in getEventsonEdgeClick(ev) {const self = this;const currentEdge = ev.item;if (self.addingEdge && self.edge === currentEdge) {self.graph.removeItem(self.edge);self.edge = null;self.addingEdge = false;}},});},

点击节点，获取当前节点数据并进行修改

// 注册事件
graph.on("node:click", this.onNodeClick);
// 获取数据
onNodeClick(e) {this.mode = "node";const item = e.item.getModel();this.nodeData.label = item.label;this.nodeData.id = item.id;
}
// 修改数据
changeNodeName() {if (this.nodeData.id) {const item = graph.findById(this.nodeData.id);graph.updateItem(item, {label: this.nodeData.label,});}
}

点击边，获取当前边数据并进行修改

// 注册事件
graph.on("edge:click", this.onEdgeClick);
// 获取数据
onEdgeClick(e) {this.mode = "edge";const item = e.item.getModel();this.edgeData.label = item.label;this.edgeData.id = item.id;
}
// 修改数据
changeEdgeName() {if (this.edgeData.id) {const item = graph.findById(this.edgeData.id);graph.updateItem(item, {label: this.edgeData.label,});}
}