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

16 篇文章 2 订阅

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

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

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

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

下面是一些关键代码

根据官网修改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官网

  • 4
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值