AntV/G6节点样式自定义指南：从基础配置到条件渲染

AntV/G6节点样式自定义指南：从基础配置到条件渲染

最近在做一个图可视化的项目，用到了AntV/G6，发现很多刚接触的朋友对节点样式的自定义，特别是根据数据动态变化这块，感觉有点无从下手。其实，G6在这方面的设计非常灵活，从简单的全局样式覆盖，到复杂的基于数据模型的条件渲染，都能优雅地实现。这篇文章，我就结合自己踩过的一些坑和实际项目经验，来聊聊如何从零开始，一步步掌握G6节点样式的自定义艺术，尤其是那个让图表“活”起来的条件渲染技巧。

1. 理解G6的样式配置体系：从默认到自定义

在开始写代码改变节点颜色之前，我们得先搞清楚G6是怎么管理节点样式的。这有点像CSS，有默认值，有继承，也有优先级覆盖。理解了这个体系，后面的操作就会清晰很多。

G6的样式配置主要在两个层面发生作用：全局默认配置和单个节点配置。当你创建一个图实例时，可以通过 defaultNode 来设定所有节点的默认外观。这包括大小、颜色、描边、标签字体等基础属性。这是一个很好的起点，能确保你的图有一个统一的基础视觉风格。

const graph = new G6.Graph({
  container: 'container',
  width: 800,
  height: 600,
  defaultNode: {
    size: 40, // 节点大小
    style: {
      fill: '#C6E5FF', // 默认填充色
      stroke: '#5B8FF9', // 默认描边色
      lineWidth: 2,
      cursor: 'pointer' // 甚至鼠标手势
    },
    labelCfg: {
      style: {
        fill: '#333',
        fontSize: 14
      }
    }
  }
});

但 defaultNode 只是蓝图。当我们需要为特定节点赋予独特样式时，就需要用到数据驱动的配置方式。G6提供了几种强大的方法：

• 在数据中直接定义：最直接的方式，就是在节点数据对象里包含 style 字段。
• 通过 graph.node() 方法映射：这是一个函数，G6在渲染每个节点前都会调用它，我们可以根据节点数据动态返回样式对象。
• 自定义节点类型：对于结构复杂、需要自定义图形（比如一个包含图标和多个文本的节点），可以注册一个自定义节点，实现其 draw 和 update 方法，获得最高级别的控制权。

这三种方式的控制粒度由粗到细。对于大多数“根据条件改变颜色”的需求，前两种方法已经绰绰有余。它们之间的关系，可以用下面这个简单的优先级表格来理解：