AntV X6 常用方法

1. Graph 相关方法

1.1 创建 Graph

使用场景：初始化画布，设置基本参数。

arduino 复制代码

import { Graph } from '@antv/x6';
const graph = new Graph({
  container: document.getElementById('container'),
  width: 800,
  height: 600,
  grid: true,
});

1.2 添加节点

使用场景：在画布上添加新的图形节点。

php 复制代码

const node = graph.addNode({
  x: 40,
  y: 40,
  width: 100,
  height: 40,
  label: 'Hello',
});

1.3 添加边

使用场景：创建节点之间的连接关系。

php 复制代码

const edge = graph.addEdge({
  source: node1,
  target: node2,
  label: 'Edge',
});

1.4 获取所有节点

使用场景：用于遍历所有节点，例如批量更新节点样式。

ini 复制代码

const nodes = graph.getNodes();

1.5 获取所有边

使用场景：获取当前所有连接关系，例如调整样式或删除特定边。

ini 复制代码

const edges = graph.getEdges();

1.6 删除元素

使用场景：当用户进行编辑操作时，删除选定的节点或边。

ini 复制代码

graph.removeNode(node);
graph.removeEdge(edge);

1.7 清空画布

使用场景：用于重置整个画布。

ini 复制代码

graph.clear();

2. Node 相关方法

2.1 设置/获取节点数据

使用场景：存储或获取节点的业务数据，例如状态信息。

ini 复制代码

node.setData({ key: 'value' });
const data = node.getData();
console.log(data.key);

2.2 更新节点数据

使用场景：在不覆盖原有数据的情况下，增量更新节点数据。

php 复制代码

node.setData({ key: 'newValue' }, { overwrite: false });

2.3 设置/获取节点位置

使用场景：调整节点在画布中的位置。

ini 复制代码

node.position(100, 100);
const { x, y } = node.getPosition();

2.4 设置/获取节点大小

使用场景：改变节点尺寸，例如放大或缩小。

scss 复制代码

node.resize(120, 50);
const { width, height } = node.getSize();

2.5 设置/获取节点旋转角度

使用场景：适用于旋转特定类型的节点，如箭头或图标。

ini 复制代码

node.rotate(45);
const angle = node.getAngle();

2.6 设置/获取节点文本

使用场景：修改节点的显示文本。

ini 复制代码

node.setLabel('New Label');
const label = node.getLabel();

2.7 设置节点样式

使用场景：修改节点外观，例如颜色、字体大小。

arduino 复制代码

node.attr('body/fill', 'blue');
node.attr('label/fontSize', 14);

3. Edge 相关方法

3.1 设置/获取边的文本

使用场景：给边添加描述信息。

ini 复制代码

edge.setLabel('New Edge Label');
const label = edge.getLabel();

3.2 设置/获取边的样式

使用场景：修改边的外观，例如颜色、宽度。

arduino 复制代码

edge.attr('line/stroke', 'red');

3.3 设置/获取边的连接点

使用场景：动态调整边的起点和终点。

ini 复制代码

edge.setSource(node1);
edge.setTarget(node2);
const source = edge.getSource();
const target = edge.getTarget();

4. 事件监听

4.1 监听节点添加事件

使用场景：当用户添加新节点时触发特定操作。

javascript 复制代码

graph.on('node:added', ({ node }) => {
  console.log('Node added:', node);
});

4.2 监听节点点击事件

使用场景：用户点击节点时，显示详细信息或执行操作。

javascript 复制代码

graph.on('node:click', ({ node }) => {
  console.log('Node clicked:', node.id);
});

4.3 监听边点击事件

使用场景：点击边时高亮、删除或修改连接信息。

javascript 复制代码

graph.on('edge:click', ({ edge }) => {
  console.log('Edge clicked:', edge.id);
});

4.4 监听画布点击事件

使用场景：用户点击空白区域时，取消选中所有元素。

javascript 复制代码

graph.on('blank:click', () => {
  console.log('Canvas clicked');
});

5. 画布操作

5.1 放大/缩小

使用场景：调整画布的缩放级别。

scss 复制代码

graph.zoom(1.2); // 放大 1.2 倍
graph.zoom(0.8); // 缩小 0.8 倍

5.2 适应画布

使用场景：自动缩放图形以适应视图。

ini 复制代码

graph.zoomToFit();

5.3 平移画布

使用场景：调整视图中心点。

ini 复制代码

graph.translate(100, 50);

6. 自定义节点与边

6.1 自定义节点

使用场景：创建特定类型的节点，如流程图或组织结构图。

php 复制代码

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

graph.addNode(
  new Shape.Rect({
    width: 100,
    height: 40,
    attrs: {
      body: { fill: 'blue' },
      label: { text: 'Custom Node', fill: 'white' },
    },
  })
);

6.2 自定义边

使用场景：创建具有特定样式的边，例如虚线或曲线连接。

php 复制代码

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

graph.addEdge(
  new Shape.Edge({
    source: node1,
    target: node2,
    attrs: {
      line: { stroke: 'blue', strokeWidth: 2 },
    },
  })
);

以上是 AntV X6 的常用方法，包括对 Graph、Node、Edge 以及 Data 的操作，并添加了使用场景，希望对你有所帮助！