桑基图 (v10.3.0+)

桑基图是一种可视化工具，用于描绘从一组值流向另一组值的流程。

警告

这是一个实验性的图表。其语法非常接近纯 CSV，但将在不久的将来进行扩展。

连接的元素称为节点，连接称为链接。

示例

此示例取自 observable。尽管它在大小和颜色方面可能会有所不同。

语法

语法的理念是，用户首先输入 sankey-beta 关键字，然后粘贴下面的原始 CSV，即可获得结果。

它实现了 CSV 标准，如 此处所述，但存在细微的 **差异**

• CSV 必须 **仅包含 3 列**
• **允许** 存在 **空行**，且没有逗号分隔符，以用于视觉目的

基本

隐含地，CSV 中的 3 列分别表示 source、target 和 value

空行

默认情况下，CSV 不支持没有逗号分隔符的空行。但如果需要，可以添加它们

逗号

如果需要包含逗号，请将其用双引号括起来

双引号

如果需要包含双引号，请在引号字符串中放置一对双引号

配置

您可以自定义链接颜色、节点对齐方式和图表尺寸。

<script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
    sankey: {
      width: 800,
      height: 400,
      linkColor: 'source',
      nodeAlignment: 'left',
    },
  };
  mermaid.initialize(config);
</script>

链接着色

您可以通过将 linkColor 设置为以下选项之一来调整链接颜色

• source - 链接将采用源节点颜色
• target - 链接将采用目标节点颜色
• gradient - 链接颜色将在源节点颜色和目标节点颜色之间平滑过渡
• 十六进制颜色代码，例如 #a1a1a1

节点对齐方式

可以通过将 nodeAlignment 设置为以下选项来更改图形布局

• justify
• center
• left
• right