桑基圖 (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