桑基图

[配置项]

简介

桑基图可用于显示复杂系统中的流量、能量、材料等各种资源或流程。它使用有向无环图（DAG）结构，其中各个节点表示系统中的某些状态或事件，而边表示两个节点之间的流（通常在系统中是量与质）。

在桑基图中，节点的大小和颜色通常与其重要性和值成比例。边的宽度也与其相关的值成比例，通常还有带箭头的方向。节点和边可以用标签、图例、工具提示等方式来提供附加信息。

桑基图在许多领域中都有应用，如流量分析、能源管理、材料追溯等等。它可以帮助人们理解系统的复杂性、收集数据、发现趋势等。

图表构成

桑基图主要由节点图元和边图元、提示信息及其他组件构成。

node 图元、link 图元为桑基图的基本要素，相关的绘制配置必不可少:

sankeyChart.type: 图表类型，桑基图的类型为'sankey'
sankeyChart.data: 图表绘制的数据源
sankeyChart.categoryField: 分类字段，映射不同节点图元
sankeyChart.valueField: 数值字段，映射不同节点图元的长度
sankeyChart.nodeAlign: 节点对齐类型配置
sankeyChart.nodeGap: 同一层中两个节点之间的间隙大小配置
sankeyChart.nodeWidth: 每个节点的宽度
sankeyChart.minNodeHeight: 数据不为零或空时节点的最小大小，这个配置可以用来避免数据太小时看不到太细的节点，建议小于 5px

提示信息等作为辅助图表展示的组件，属于可选配置，自带默认效果和功能:

sankeyChart.tooltip: 提示信息，默认交互时显示，详细配置见详细配置见VChart 提示信息组件配置
更多组件配置见VChart sankeyChart 配置

快速上手

关键配置

categoryField 属性声明为类别字段，表示节点名称
valueField 属性声明数值字段，表示节点之间关系的权重
sourceField 和 targetField 属性不需要指定，根据层级结构生成
nodeKey 属性声明解析节点的 key 值

桑基图特性

数据

由于桑基图用数据结构表示节点与边的关系，所以在 VChart 中，我们定义了两种方式桑基图数据结构声明方式：

1.节点与边的平坦化数据结构：

[
  {
    nodes: [{ nodeName: 'A' }, { nodeName: 'B' }, { nodeName: 'C' }],
    links: [
      { source: 0, target: 1, value: 1 },
      { source: 0, target: 2, value: 1 }
    ]
  }
];

2.节点与边的嵌套数据结构：

[
  {
    name: 'A',
    children: [
      { name: 'A-a', value: 1 },
      { name: 'A-b', value: 2 }
    ]
  },
  {
    name: 'B',
    children: [
      { name: 'B-a', value: 3 },
      { name: 'B-b', value: 4 }
    ]
  }
];