元素总览

查看 Markdown编辑此页

元素体系

G6 图表的核心是由三种基本元素构成：节点(Node)、边(Edge) 和 组合(Combo)。这些元素是构建复杂图形网络的基础单元。

节点 (Node)

节点表示图中的实体或概念，如人物、地点、对象等。G6 提供了丰富的内置节点类型：

G6 还支持使用 React 定义节点或自定义节点以满足特定需求。

边 (Edge)

边表示节点间的连接关系，如朋友关系、交易往来等。G6 内置多种边类型：

当内置边不满足需求时，可以通过自定义边来实现复杂的连接表现。

组合 (Combo)

组合是一种特殊元素，可以包含节点和其他组合，用于表示集合、分组或层级关系。G6 内置两种组合类型：

圆形组合(circle)：适合紧凑型分组
矩形组合(rect)：适合规则布局的分组

组合支持嵌套、拖拽、展开/收起等交互，可以通过自定义组合来实现更复杂的容器行为。

元素构成原理

每个元素由一个或多个基础图形(Shape)组成。图形是 G6 中的最小图形单元，包括矩形、圆形、文本、路径等。

例如：

一个节点可能由背景图形(如圆形)和文本标签组成
一条边可能由路径、箭头和文本标签组成
一个组合可能由容器图形、标题文本和展开/收起按钮组成

要了解更多关于图形的信息，请参阅图形 Shape 总览和 Shape 样式属性。

元素状态

元素状态是一种强大的机制，用于展示元素在不同交互或业务场景下的视觉变化。G6 提供了一套完整的状态管理系统：

预设状态：selected(选中)、highlight(高亮)、active(激活)等
状态叠加：元素可同时拥有多个状态，样式按优先级叠加
自定义状态：可根据业务需求定义任意状态

配置元素

G6 5.x 采用扁平化的配置结构，所有元素的配置都在同一层级，便于查找和管理：

{
  node: {
    // 节点默认样式
    style: {
      fill: 'orange',
      labelText: 'node',
    },
    // 节点在不同状态下的样式
    state: {
      selected: {
        stroke: '#1890FF',
        lineWidth: 2,
      }
    }
  },
  edge: {
    // 边默认样式
    style: {
      stroke: '#aaa',
    },
    // 边在不同状态下的样式
    state: {
      highlight: {
        stroke: 'red',
      }
    }
  },
  combo: {
    // 组合默认样式
    style: {
      fill: 'lightblue',
      stroke: 'blue',
    }
  }
};

配置方式有三种，按优先级从高到低：

使用实例方法动态配置：如 graph.setNode()、graph.setEdge()、graph.setCombo()
实例化图时全局配置：在 new Graph() 时指定配置项
在数据中配置：在节点、边、组合的数据对象中设置

在 VSCode 等编辑器中，你可以看到元素的全部可配置属性，并基于关键字进行搜索：

扩展能力

G6 提供了强大的扩展能力，满足各种自定义需求：

自定义节点：自定义节点指南
自定义边：自定义边指南
自定义组合：自定义组合指南
React 节点：使用 React 定义节点
3D 扩展：通过 @antv/g6-extension-3d 使用 3D 节点

内置元素参考