mirror of
https://gitee.com/antv/g6.git
synced 2024-12-15 18:11:08 +08:00
181 lines
8.8 KiB
Markdown
181 lines
8.8 KiB
Markdown
---
|
||
title: 全局样式
|
||
order: 0
|
||
---
|
||
|
||
## 图构成元素
|
||
|
||
图的构成元素包括节点（Node）、边（Edge）和组（Combo），这些基础元素是图的原子组成部分，设计者可根据特定业务场景变更节点、边、组的配色和组合形式，搭建更复杂的图可视分析应用。
|
||
|
||
### 节点（Node）
|
||
|
||
#### 定义
|
||
|
||
节点是构成图的基本单位，一般表示某个实体。如社交网络数据中，一个人就是一个实体，用一个节点来表示。
|
||
|
||
#### 常见形态
|
||
|
||
根据业务场景需要，信息可视化呈现时：
|
||
|
||
- 节点可加标签、可不加标签；
|
||
- 节点可存在不同形状；
|
||
- 节点可加简短描述；
|
||
- 节点可展开下级信息。
|
||
|
||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*alVuQb3ToGwAAAAAAAAAAAAAARQnAQ' width='90%'>
|
||
|
||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*rx0oT6wgTAQAAAAAAAAAAAAAARQnAQ' width='90%'>
|
||
|
||
#### 交互样式
|
||
|
||
点交互基础样式有以下 6 种：基础状态：Default-默认、Active-激活、Selected-选中、Disable-失效被动状态：Highlight-强化、Inactive-弱化（在交互场景中与 Default-默认 做出区分）
|
||
|
||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*R8m5RoGLcy8AAAAAAAAAAAAAARQnAQ' width='90%'>
|
||
|
||
> 以力导向图布局和辐射布局为例
|
||
|
||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*85cVQrHHshkAAAAAAAAAAAAAARQnAQ' width='90%'>
|
||
|
||
### 边（Edge）
|
||
|
||
#### 定义
|
||
|
||
边（Edge）表示的是两个节点之间的关系。如社交网络数据中，我和你的关系，是朋友。
|
||
|
||
#### 常见形态
|
||
|
||
因图的类型众多，边的形态也相应有：
|
||
|
||
- 有向的（含箭头）、无向的（无箭头）；
|
||
- 加权的（含值）、无加权的（不含值）；
|
||
- 加标签、不加标签；
|
||
- 不同粗细代表节点流量。
|
||
|
||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*-AluQ4fjOqIAAAAAAAAAAAAAARQnAQ' width='90%'>
|
||
|
||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*PvfKRpTXkcIAAAAAAAAAAAAAARQnAQ' width='90%'>
|
||
|
||
#### 交互样式
|
||
|
||
边的交互基础样式跟节点同样有以下 6 种：Default、Active、Selected、Disable、Highlight、Inactive
|
||
|
||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*g4VVR4ltADAAAAAAAAAAAAAAARQnAQ' width='90%'>
|
||
|
||
> 在节点的交互样式引用图例中同样可看到边的运用效果
|
||
|
||
### 组（Combo）
|
||
|
||
#### 定义
|
||
|
||
组合，又称为节点分组，用于管理一组相似的节点，如一组具有相同类型的节点，或位置上比较靠近的一组节点，可以将它们划分到同一个 Combo 中，可以有效降低视觉上的干扰。
|
||
|
||
#### 常见形态
|
||
|
||
G6 默认提供两种类型，使用带有不重叠约束的力导向图布局方法，可根据业务场景和布局需要选取合适的形状。
|
||
|
||
- Circle 圆形
|
||
- Rect 矩形
|
||
|
||
<img src='' width='90%'>
|
||
|
||
> 在 Combo 的具体运用中，会出现 Combo 未展开/已展开、一级 Combo 和二级 Combo 及更多级相结合的形式，上图仅为未展开、展开（共一级）、展开（共二级）形式
|
||
|
||
#### 交互样式
|
||
|
||
节点组合形式千变万化，按常见形态延伸相应的交互样式如下：
|
||
|
||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*JACuQ4ogrWEAAAAAAAAAAAAAARQnAQ' width='90%'>
|
||
|
||
## 关系图色板
|
||
|
||
G6 在 AntV 的基础色彩体系的基础上，结合关系图表达的特点，精细化调整了颜色在数据维度上的衡量和线性感知。内置了一系列优美、和谐且满足无障碍设计原则的色板。包括：分类色板、邻近色板、发散色板、语义色板。默认情况下以蓝色为基础样式的案例色，也是 G6 的默认主色。
|
||
|
||
让颜色在图中能够达成在数据变化和人体感知上尽可能线性匹配，不同数值对应的颜色区分度要足够高，且在拥有分类色状态下依然感知均匀，一个连续数据集的所有数据点都具有同等的视觉重要性。
|
||
|
||
### 默认主题色
|
||
|
||
选择蓝色为基础样式的案例色，也是基础样式的默认色 /G6 的主色；灰色作为辅助色。
|
||
|
||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*_TBXR5V3QHgAAAAAAAAAAAAAARQnAQ' width='90%'>
|
||
|
||
### 邻近色色板
|
||
|
||
#### 定义
|
||
|
||
邻近色顺序色板，一般使用两个或以上个临近色调，通过明度和饱和度的逐步渐变，常用来区分有序数据优先级的高低、连续数据的大小或梯度变化。
|
||
|
||
#### 取色指南
|
||
|
||
根据数据语义特定管理约束，选择合理色调搭配，使连续变化的色调和明度，可产生更多色彩分级，表达更多的连续数值。
|
||
|
||
#### 取色方法
|
||
|
||
1. 亮色色板选取单色顺序色板中的 1 号色作为起始色，相应临近色调 4 号色为中间色，以此类推，继中间色相应近色调 7 号色为结束色，借助色彩工具，在 CIELab 色彩空间下生成渐变色；
|
||
2. 暗色色板同理，起始色为 2 号色，中间色为相应邻近色调 5 号色，结束色为中间色邻近色调的 8 号色；
|
||
3. 保留未分段的色带，便于用户自由分段取数。
|
||
|
||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*fuYUS7wn9AcAAAAAAAAAAAAAARQnAQ' width='90%'>
|
||
|
||
### 发散色色板
|
||
|
||
#### 定义
|
||
|
||
也称对比色渐变色板，一般是两种互补色（也可以是对比色）去展现数据从一个负向值到 0 点再到正向值的连续变化区间，显示相对立的两个值的大小关系。数据范围的两端同等强调中间值和极值，以表示断点(如零变化或平均值)周围与数据中特定有意义的中间值之间的差异。
|
||
|
||
#### 取色指南
|
||
|
||
关键断点应该采用中性颜色及与背景色对比度低，如浅灰色，端点应该采用和背景色对比度高的饱和颜色。一般来说是对称的，临界断点可以是平均值、中间值或零变化值。
|
||
|
||
#### 取色方法
|
||
|
||
1. 选取分类色板中的对比色或互补色，其中 7 号色起始色和结束色，4 号色为过渡色，灰阶色的 1 号色作为中间色，在 CIELab 色彩空间下生成渐变色；
|
||
2. 暗色色板同理，其中 8 号色起始色和结束色，5 号色为过渡色，灰阶色的 2 号色作为中间色；
|
||
3. 保留未分段的色带，便于用户自由分段取数。
|
||
|
||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Jlz9RopMyb4AAAAAAAAAAAAAARQnAQ' width='90%'>
|
||
|
||
### 语义色板
|
||
|
||
#### 定义
|
||
|
||
色彩在可视化中的使用，不仅是数据信息传递的可视化通道，同时也是更深一层的文化故事的载体，用于表达意义或情感。
|
||
|
||
#### 取色指南
|
||
|
||
重视用色习惯，遵循相关标准，色彩也不是都能寓意的，相当一部分图表色彩选择和感情因素无关，而是按照某种习惯来设定色彩，即所谓约定俗成，有的甚至形成来规范。
|
||
|
||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*9w1lSZoX-iEAAAAAAAAAAAAAARQnAQ' width='90%'>
|
||
> 语义色板（部分）
|
||
|
||
更多色板介绍，详见 AntV 色板。
|
||
|
||
## 设计 Tips
|
||
|
||
### 节点（Node）
|
||
|
||
以圆形节点为例，根据点不同的信息展示形式，基础形状的大小有所不同，在图展示中需将图相关信息做最优展示。
|
||
|
||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ScDaRKLfuAQAAAAAAAAAAAAAARQnAQ' width='90%'>
|
||
> 圆形节点——文本置内型，节点直径大小建议为 60px，文本大小为 12px
|
||
|
||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*rJfORqHKyp0AAAAAAAAAAAAAARQnAQ' width='90%'>
|
||
> 圆形节点——文本非置内型，节点直径大小建议为 16px，文本大小为 12px
|
||
|
||
### 边（Edge）
|
||
|
||
边的粗细：边在点默认大小场景下默认为 1px，通常根据视图大小变化等比例放大缩小。为保持信息有效可视，边最小为 1px，最大值为 12px。
|
||
|
||
### 组（Combo）
|
||
|
||
Combo 的大小跟随内容，Node 与 Combo 之间的间隙最小为 Small = 8px。
|
||
|
||
### 色板使用
|
||
|
||
> 数据集：又称为资料集、数据集合或资料集合，是一种由数据所组成的集合。连续数值：统计学概念,又称连续变量。指在一定区间内可以任意取值、数值是连续不断的、相邻两个数值可作无限分割(即可取无限个数值)的数据。断点：文中主要指数据集的中心值或参考值，例如零变化或平均值。端点：文中主要指数据集极端值，例如最大最小值。语义：文中主要指色彩心理学中色彩在客观上对人们对一种刺激和象征，它在主观上又是一种反应和行为。包含从知觉、感情而到记忆、思想、意志、象征等与色彩的因果关系。
|
||
|
||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*UDaLQIBexdAAAAAAAAAAAAAAARQnAQ' width='90%'>
|
||
|
||
当需要用颜色作为视觉通道时，数据性质可作为参考因素，选用色板的步骤大致如下图：
|
||
|
||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*R-PrQaygrgQAAAAAAAAAAAAAARQnAQ' width='90%'>
|