一小时实现简单的手动添加节点和边,实现可视化展示
左边:取消添加节点和边、获取的拓扑图数据、添加节点、添加边
中间:可视化展示区域
右边:修改节点信息、修改边信息
下面是一些关键代码
根据官网修改G6设置交互模式
添加节点
注册自定义事件:G6.registerBehavior
/**
* @description 注册点击添加节点
*/
addNode() {
let _this = this;
G6.registerBehavior("click-add-node", {
// Set the events and the corresponding responsing function for this behavior
getEvents() {
// The event is canvas:click, the responsing function is onClick
return {
"canvas:click": "onClick",
};
},
// Click event
onClick(ev) {
const self = this;
const graph = self.graph;
// Add a new node
graph.addItem("node", {
x: ev.canvasX,
y: ev.canvasY,
id: `node-${_this.addedCount}`, // Generate the unique id
label: `node-${_this.addedCount}`,
});
_this.addedCount++;
},
});
},
添加边
注册自定义事件:G6.registerBehavior
/**
* @description 注册点击添加边
*/
addEdge() {
G6.registerBehavior("click-add-edge", {
// Set the events and the corresponding responsing function for this behavior
getEvents() {
return {
"node:click": "onClick", // The event is canvas:click, the responsing function is onClick
mousemove: "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 getEvents
onClick(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 clicks
self.edge = graph.addItem("edge", {
source: model.id,
target: model.id,
});
self.addingEdge = true;
}
},
// The responsing function for mousemove defined in getEvents
onMousemove(ev) {
const self = this;
// The current position the mouse clicks
const point = { x: ev.x, y: ev.y };
if (self.addingEdge && self.edge) {
// Update the end node to the current node the mouse clicks
self.graph.updateItem(self.edge, {
target: point,
});
}
},
// The responsing function for edge:click defined in getEvents
onEdgeClick(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,
});
}
}
获取当前拓扑图的数据
getData() {
console.log(graph.save());
}
非常简单的demo,仓库地址
想要更多的自定义的节点和边,可以看该仓库下的另一个页面,或者G6官网