色板(Palette)是指一组预定义的颜色集合,用于帮助用户更方便的选择颜色。在 G6 中,色板是一种常见的配置项,用户可以通过色板来配置节点、边、连线等元素的颜色。
色板分为离散色板
和连续色板
两种类型。
离散色板是一组颜色数组,用于将元素中的离散值映射到不同的颜色上,例如节点的类型、边的关系等。下面是一个简单的离散色板示例:
['#5B8FF9', '#61DDAA', '#F6BD16', '#F6903D', '#F08BB4'];
连续色板是一个插值器,输入 0~1 的值,返回对应的颜色,用于将元素中的连续值映射到不同的颜色上,例如节点的度数、边的权重等。下面是一个简单的连续色板示例:
(value: number) => `rgb(${value * 255}, 0, 0)`;
你可以直接使用内置色板,如果想使用其他色板,需要先进行注册:
import { register, ExtensionCategory } from '@antv/g6';import { CustomPalette } from 'package-name/or/path-to-your-custom-palette';register(ExtensionCategory.PALETTE, 'custom-palette', CustomPalette);
在注册色板过程中并不会区分离散色板和连续色板,使用色板过程中需要自行保证色板类型和数据类型的一致性。
目前 G6 内置了 5 套常用的离散色板,用户可以直接使用:
目前开放色板配置的地方主要以元素为主,以节点为例:
palette
的值为色板名,会默认为每个节点分配不同的颜色{node: {palette: 'spectral', // spectral 为色板名}}
createGraph({data: {nodes: new Array(30).fill(0).map((_, i) => ({ id: `node-${i}` })),},layout: { type: 'grid', cols: 10, rows: 3 },node: {palette: 'spectral',},},{ width: 400, height: 100 },);
当元素数量超过色板颜色数量时,会循环使用色板中的颜色
type: 'group'
,field
,color
,invert
其中 type: 'group'
显式指定了当前色板类型为离散色板;field
指定元素数据中的分组字段;color
为色板名;invert
为是否反转色板。
给定一组示例数据:
{"nodes": [{ "id": "node-1", "data": { "category": "A" } },{ "id": "node-2", "data": { "category": "B" } },{ "id": "node-3", "data": { "category": "C" } },{ "id": "node-4", "data": { "category": "A" } },{ "id": "node-5", "data": { "category": "B" } },{ "id": "node-6", "data": { "category": "C" } }]}
数据中 node-1
,node-4
属于 A 类别,node-2
,node-5
属于 B 类别,node-3
,node-6
属于 C 类别。
通过以下方式配置节点的颜色,使得同类别的节点颜色相同:
{node: {palette: {type: 'group', // 指定色板类型为分类色板field: 'category', // 指定数据中的分组字段color: 'tableau', // 使用 tableau 色板}}}
createGraph({data: {nodes: new Array(6).fill(0).map((_, i) => ({ id: `node-${i}`, data: { category: ['A', 'B', 'C'][i % 3] } })),},layout: { type: 'grid', cols: 6 },node: {palette: {type: 'group',field: 'category',color: 'tableau',},},},{ width: 200, height: 50 },);
连续色板只支持标准方式配置,配置属性包括:type: 'value'
,field
,color
,invert
。
给定一组示例数据:
{"nodes": [{ "id": "node-1", "data": { "value": 0 } },{ "id": "node-2", "data": { "value": 20 } },{ "id": "node-3", "data": { "value": 40 } },{ "id": "node-4", "data": { "value": 60 } },{ "id": "node-5", "data": { "value": 80 } },{ "id": "node-6", "data": { "value": 100 } }]}
现在创建一个插值器,将最大值映射为红色(rgb(255, 0, 0)
),最小值映射为黑色(rgb(0, 0, 0)
):
(value) => `rgb(${value * 255}, 0, 0)`;
通过以下配置使得节点的颜色根据数据中的 value
字段的值映射到不同的颜色:
{node: {palette: {type: 'value', // 指定色板类型为连续色板field: 'value', // 指定数据中的数值字段color: (value) => `rgb(${value * 255}, 0, 0)`, // 使用插值器}}}
createGraph({data: {nodes: new Array(6).fill(0).map((_, i) => ({ id: `node-${i}`, data: { value: (i + 1) * 20 } })),},layout: { type: 'grid', cols: 6 },node: {palette: {type: 'value',field: 'value',color: (value) => `rgb(${value * 255}, 0, 0)`,},},},{ width: 200, height: 50 },);
内置连续色板不支持指定值域范围,如果有更复杂的颜色映射需求,可以在样式映射中自定义
如果内置色板无法满足需求,可以自定义色板,具体请参考自定义色板。
色板会基于元素类型生成样式,对于节点和组合,会将颜色映射到 fill
属性;对于边,会将颜色映射到 stroke
属性。
如果同时配置了色板和样式映射,样式映射会覆盖色板颜色。下面的例子中,节点的颜色始终为红色:
{node: {style: {fill: 'red',},palette: 'spectral',}}