antv3 x6 基本语法-事件（五）

鼠标事件

 

graph.on('cell:click', ({ e, x, y, cell, view }) => {})
graph.on('node:click', ({ e, x, y, node, view }) => {})
graph.on('edge:click', ({ e, x, y, edge, view }) => {})
graph.on('blank:click', ({ e, x, y }) => {})

graph.on('cell:mouseenter', ({ e, cell, view }) => {})
graph.on('node:mouseenter', ({ e, node, view }) => {})
graph.on('edge:mouseenter', ({ e, edge, view }) => {})
graph.on('graph:mouseenter', ({ e }) => {})

 

其它事件可以查看文档

 

获取节点信息

 this.graph.on("node:click", (e) => {
        const node = e.node;
        if (!node) return;

        console.log("node", node);
        const nodeInfo = {
          // 1. 唯一标识
          id: node.id, // 节点ID（必选，创建时手动指定或自动生成）

          // 2. 自定义业务数据（最常用）
          data: node.getData(), // 获取创建时设置的 data 字段

          // 3. 位置信息
          position: node.position(), // {x: 100, y: 200} 节点左上角坐标
          // centerPosition: node.getCenterPosition(), // {x: 160, y: 230} 节点中心坐标

          // 4. 尺寸信息
          size: node.size(), // {width: 120, height: 60} 节点宽高
          bbox: node.getBBox(), // 节点包围盒（包含x/y/width/height）

          // 5. 显示文本（label）
          label: node.attr("label/text"), // 获取节点显示的文本
          labelStyle: node.attr("label/style"), // 获取label的样式（字体/颜色等）

          // 6. 样式属性（attrs）
          bodyFill: node.attr("body/fill"), // 节点背景色
          bodyStroke: node.attr("body/stroke"), // 节点边框色
          bodyStrokeWidth: node.attr("body/strokeWidth"), // 节点边框宽度

          // 7. 节点类型与状态
          shape: node.shape, // 节点形状（如 'rect'/'circle'/'html'）
          visible: node.isVisible(), // 是否可见（true/false）

          // 8. 层级与分组
          // zIndex: node.zIndex(), // 节点层级（数值越大越在上）
          parent: node.getParent(), // 父节点/分组（若无则为null）

          // 9. 原始完整数据（备用，不推荐常规使用）
          rawData: node.toJSON(), // 节点的完整JSON数据（包含所有配置）
        };

        // 打印所有信息，方便调试查看
        console.log("节点全量信息：", nodeInfo);

        // 示例：按需提取常用信息
        console.log("节点ID：", nodeInfo.id);
        console.log("节点文本：", nodeInfo.label);
        console.log("节点自定义数据：", nodeInfo.data);
        console.log("节点位置：", nodeInfo.position.x, nodeInfo.position.y);
      });

 

修改节点信息：

node.setData({ ...node.getData(), status: '已完成' });

node.position({ x: 200, y: 300 }); // 修改位置
node.size({ width: 150, height: 80 }); // 修改尺寸
node.attr('label/text', '新的文本'); // 修改显示文本
node.setData({ ...node.getData(), status: '已完成' }); // 修改自定义数据

 

是最常用的三个方法

node.getData()

node.position()

node.attr('label/text')