桑基图 (v10.3.0+)

¥Sankey diagram (v10.3.0+)

桑基图是一种可视化，用于描述从一组值到另一组值的流动。

¥A sankey diagram is a visualization used to depict a flow from one set of values to another.

警告

这是一个实验图表。它的语法非常接近纯 CSV，但它将在不久的将来得到扩展。

连接的事物称为节点，连接称为链接。

¥The things being connected are called nodes and the connections are called links.

示例

¥Example

这个例子取自 observable。不过，在大小和颜色方面，它的渲染可能略有不同。

¥This example taken from observable. It may be rendered a little bit differently, though, in terms of size and colors.

语法

¥Syntax

语法背后的想法是，用户首先输入 sankey-beta 关键字，然后将原始 CSV 粘贴到下面并获取结果。

¥The idea behind syntax is that a user types sankey-beta keyword first, then pastes raw CSV below and get the result.

它实现 CSV 标准为 此处描述，但有细微的差别：

¥It implements CSV standard as described here with subtle differences:

• CSV 必须仅包含 3 列

  ¥CSV must contain 3 columns only

• 为了视觉目的，允许有没有逗号分隔符的空行

  ¥It is allowed to have empty lines without comma separators for visual purposes

基础

¥Basic

这意味着 CSV 中的 3 列应分别代表 source、target 和 value：

¥It is implied that 3 columns inside CSV should represent source, target and value accordingly:

空行

¥Empty Lines

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

¥CSV does not support empty lines without comma delimiters by default. But you can add them if needed:

逗号

¥Commas

如果需要逗号，请将其用双引号引起来：

¥If you need to have a comma, wrap it in double quotes:

双引号

¥Double Quotes

如果需要双引号，请将一对双引号放在带引号的字符串内：

¥If you need to have double quote, put a pair of them inside quoted string:

配置

¥Configuration

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

¥You can customize link colors, node alignments and diagram dimensions.

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

链接着色

¥Links Coloring

你可以通过将 linkColor 设置为以下之一来调整链接的颜色：

¥You can adjust links' color by setting linkColor to one of those:

• source - 链接将具有源节点颜色

  ¥source - link will be of a source node color

• target - 链接将具有目标节点颜色

  ¥target - link will be of a target node color

• gradient - 链接颜色将在源节点颜色和目标节点颜色之间平滑过渡

  ¥gradient - link color will be smoothly transient between source and target node colors

• 颜色的十六进制代码，如 #a1a1a1

  ¥hex code of color, like #a1a1a1

节点对齐

¥Node Alignment

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

¥Graph layout can be changed by setting nodeAlignment to:

• justify

• center

• left

• right