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')