踩坑记录：G6难忘之痛

使用 G6 进行数据可视化的常见问题及解决方案

导入 G6 库

导入 G6 库时，新手经常遇到的一个问题是选择正确的导入方式。对于旧版本，通过 <script> 标签引入即可；对于新版本，需要通过 npm 包管理。

// 旧版本（< G6 v4.0）
<script src="https://gw.alipayobjects.com/os/antv/pkg/antv-g6/4.0.0/dist/g6.min.js"></script>

// 新版本（>= G6 v4.0）
import G6 from '@antv/g6';

创建 G6 实例

创建 G6 实例时，需要指定容器的 ID，确保容器已存在且大小足够大。否则，G6 实例无法正常显示。

const container = document.getElementById('my-container');
const graph = new G6.Graph({
  container,
  width: 500,
  height: 500
});

添加节点和边

添加节点时，需指定 ID、类型、位置等信息；添加边时，需指定 ID、源节点 ID、目标节点 ID 等信息。

// 添加节点
graph.add('node', {
  id: 'my-node',
  type: 'circle',
  x: 100,
  y: 100
});

// 添加边
graph.add('edge', {
  id: 'my-edge',
  source: 'my-node-1',
  target: 'my-node-2'
});

设置节点和边的样式

设置节点和边的样式时，需要注意指定正确的属性。例如，设置节点形状，使用 shape 属性；设置边颜色，使用 color 属性。

// 设置节点形状
graph.update('node', 'my-node', {
  shape: 'rect'
});

// 设置边颜色
graph.update('edge', 'my-edge', {
  color: '#FF0000'
});

监听节点和边的事件

监听节点和边的事件时，需要指定正确的 ID。例如，监听节点点击事件，使用 click 事件监听；监听边点击事件，使用 click 事件监听。

// 监听节点点击事件
graph.on('node:click', (evt) => {
  // evt.item 是被点击的节点
  console.log(evt.item);
});

// 监听边点击事件
graph.on('edge:click', (evt) => {
  // evt.item 是被点击的边
  console.log(evt.item);
});

导出 G6 实例

导出 G6 实例时，需指定正确的导出格式。例如，导出为图片，使用 toPNG() 方法；导出为 JSON 数据，使用 toJSON() 方法。

// 导出为 PNG 图片
graph.toPNG((canvas) => {
  const dataURL = canvas.toDataURL('image/png');
});

// 导出为 JSON 数据
const data = graph.toJSON();

常见问题解答

1. 如何修复导入 G6 库时出现的错误？

检查是否使用了正确的导入方式，对于旧版本使用 <script> 标签，对于新版本使用 npm 包管理。

2. 创建 G6 实例时，为什么会出现错误？

确保容器已存在且大小足够大。

3. 添加节点和边时，为什么没有效果？

检查是否正确指定了节点和边的属性，例如 ID、类型、位置等。

4. 如何动态更新节点或边的样式？

使用 update() 方法，指定节点或边的 ID 和要更新的属性。

5. 如何处理节点或边点击事件？

使用 on() 方法，指定事件类型（例如 click）和事件处理函数。