antv3 x6 基本语法-动态节点添加 data数据（六）

1: 创建节点时初始化 data（基础）

// 初始化画布
const graph = new Graph({ container: document.getElementById('container') });

// 创建节点时设置初始 data
const node = graph.addNode({
  id: 'node1',
  x: 200,
  y: 200,
  width: 120,
  height: 60,
  label: '初始节点',
  // 初始业务数据
  data: {
    userId: 1001,
    userName: '张三',
    status: '未完成'
  }
});

 

2：动态给已存在的节点添加 / 修改 data（核心）

使用 node.setData(newData) 全量替换，适合一次性更新所有业务数据

// 1. 获取已存在的节点（两种方式）
// 方式1：创建节点时保存引用（推荐）
const node = graph.getCellById('node1'); 

// 2. 全量替换 data（覆盖原有字段）
node.setData({
  userId: 1001,
  userName: '张三',
  status: '已完成', // 修改原有字段
  dept: '技术部'    // 新增字段
});

// 验证：获取更新后的数据
console.log(node.getData()); // 输出：{userId: 1001, userName: '张三', status: '已完成', dept: '技术部'}

 

 增量修改 data（保留原有数据）

使用 node.setData({ ...node.getData(), 新增/修改字段 })，适合只更新部分字段：

// 增量更新：保留原有数据，仅修改 status 并新增 role 字段
node.setData({
  ...node.getData(), // 解构原有 data，保留未修改的字段
  status: '已审核',
  role: '管理员'
});

// 验证
console.log(node.getData().status); // 输出：已审核
console.log(node.getData().dept);   // 输出：技术部（原有字段保留）

 

动态添加单个字段（极简）

若只需添加 / 修改一个字段，可直接通过 setData 嵌套赋值

// 给现有 data 新增单个字段
node.setData({
  ...node.getData(),
  phone: '13800138000'
});

 

 批量给多个节点添加 data

// 1. 获取画布中所有节点
const allNodes = graph.getNodes();

// 2. 遍历批量添加/修改 data
allNodes.forEach((node, index) => {
  node.setData({
    ...node.getData(), // 保留原有数据
    batchId: `batch-${index}`, // 批量标识
    updateTime: new Date().toLocaleString() // 新增更新时间
  });
});

 

 修改 data 后同步更新节点显示（如 label）

// 修改 data 并同步更新节点 label
const node = graph.getNodeById('node1');
node.setData({
  ...node.getData(),
  userName: '张三（管理员）'
});

// 同步更新节点显示的 label 文本
node.attr('label/text', node.getData().userName);

禁止直接修改 data：

node.data.status = '已完成';

 正确写法：必须使用 node.setData()。

 

data 为空时的容错： {}

const currentData = node.getData() || {}; // 为空时赋值空对象
node.setData({ ...currentData, newField: '值' });

监听 data 变化（可选）：

// 监听所有节点的 data 变化
graph.on('cell:data:change', ({ cell, previousData }) => {
  if (cell.isNode()) { // 仅监听节点
    console.log('节点 data 变化：', {
      nodeId: cell.id,
      oldData: previousData,
      newData: cell.getData()
    });
    // 自定义逻辑：如同步更新节点样式/文本
    cell.attr('label/text', cell.getData().userName);
  }
});