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 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官网