AntV X6 图表基础：Cell、Node 篇

前端

2023-12-03 00:15:00

导语

在上一篇文章中，我们探讨了 AntV X6 中的拖拽组件 Dnd 和 Stencil。本篇将继续深入 AntV X6，了解如何创建图形基础：Cell 和 Node。

Cell：图形的基本单元

Cell 是 AntV X6 中图形的基本单元，它可以表示图表中的任何元素，例如节点、边或容器。每个 Cell 都具有以下属性：

id：唯一标识符
shape：形状，例如圆形、矩形或多边形
size：大小，包括宽度和高度
label：标签，可以是文本、图标或两者结合

Node：图表的节点

Node 是 Cell 的一种特殊类型，它代表图表中的一个节点。节点可以包含以下附加属性：

labelCfg：标签配置，包括字体、颜色和位置
ports：端口，用于连接边
model：模型数据，可以是任意对象
content：自定义内容，例如 SVG 或 HTML

创建 Cell 和 Node

创建 Cell 和 Node 的步骤如下：

导入 AntV X6：import { Graph } from '@antv/x6';
创建 Graph 实例：const graph = new Graph({ container: document.getElementById('container') });
使用 graph.addNode() 或 graph.addCell() 方法创建 Cell 或 Node：

graph.addNode({
  id: 'node1',
  shape: 'rect',
  size: [100, 50],
  label: 'Node 1'
});

编辑 Cell 和 Node

Cell 和 Node 可以通过以下方式进行编辑：

使用 graph.updateCell() 方法更改属性
使用 graph.removeCell() 方法删除 Cell
使用 graph.createEdge() 方法创建边
使用 graph.getCells() 方法获取所有 Cell

示例：创建可编辑图表

以下示例展示了如何使用 Cell 和 Node 创建一个可编辑图表：

import { Graph } from '@antv/x6';

const graph = new Graph({
  container: document.getElementById('container')
});

graph.addNode({
  id: 'node1',
  shape: 'rect',
  size: [100, 50],
  label: 'Node 1'
});

graph.on('node:click', (e) => {
  const node = e.item;
  node.attr('label', 'Node 1 (edited)');
});

graph.on('edge:click', (e) => {
  const edge = e.item;
  edge.attr('label', 'Edge 1 (edited)');
});