syncfusion-react-sankey

Syncfusion React Sankey Chart の実装

このスキルを使用する場面

次のような場合にこのスキルを使用します。

• エネルギーの流れやプロセス間の依存関係を表示する
• 階層的な関係やカテゴリ間のデータの移動を視覚化する
• カスタムスタイルを適用したインタラクティブなノードリンク図を作成する
• 凡例やツールチップを備えたレスポンシブなフロー図を作成する
• クリックやホバー効果などのユーザー操作を有効にする
• フロー図をエクスポートまたは印刷する
• アクセシビリティ機能や RTL レイアウトに対応する

コンポーネントの概要

Syncfusion React Sankey Chart コンポーネントは、相互接続されたノードとリンクを通じてフローデータを視覚化します。エネルギー消費、データフロー、プロセス階層、組織間の関係を表示するのに最適です。外観、インタラクティブ性、アクセシビリティを柔軟にカスタマイズできます。

主な機能：

• ノードとリンクの設定 - カスタムスタイルを適用して、データのソースと宛先を定義します
• ラベルと配置 - テキスト表示、ノードの配置、タイトルとサブタイトルを制御します
• 凡例のサポート - 配置やスタイルをカスタマイズできる凡例を表示します
• インタラクティブ性 - ツールチップ、クリックイベント、ユーザー操作に対応します
• 外観のカスタマイズ - 色、不透明度、リンクの曲率、テーマを設定します
• RTL サポート - 国際的なアプリケーション向けに右から左へのレイアウトに対応します
• アクセシビリティ - WCAG 準拠とスクリーンリーダーに対応します
• エクスポート機能 - 図のエクスポートと印刷に対応します

ドキュメントとナビゲーションガイド

はじめに

📄 読む： references/getting-started.md

• インストールとパッケージのセットアップ
• 依存関係とモジュールの注入
• 基本的な Sankey コンポーネントの作成
• 開発環境のセットアップ
• 最初のサンプルの実行

ノードとリンクの設定

📄 読む： references/nodes-and-links.md

• ノードの構造とプロパティ
• リンクの構造とデータフロー
• データバインディングとソース／ターゲットの関係
• offset プロパティを使用したノードの配置
• リンクのスタイル設定とカスタマイズ
• 大規模なデータセット向けのパフォーマンス最適化

ラベルと配置

📄 読む： references/labels-and-positioning.md

• ラベルの表示と設定
• ノードラベルの配置と整列
• タイトルとサブタイトルの設定
• テキストの書式設定とスタイルのオプション
• ラベルがあふれる場合の対処

凡例と表示オプション

📄 読む： references/legend-and-display.md

• 凡例の設定と表示
• 凡例の配置（上、下、左、右）
• 表示オプションと項目のパディング
• ビジュアルスタイルとテーマ
• 色のカスタマイズ

インタラクティブ性とイベント

📄 読む： references/interactivity.md

• ツールチップの設定と表示
• イベント処理（nodeClick、linkClick、load イベント）
• ユーザー操作のパターン
• インタラクティブ機能の有効化／無効化
• イベントコールバックとデータアクセス

外観とスタイル設定

📄 読む： references/appearance-and-styling.md

• リンクのスタイル設定（opacity、curvature、colorType）
• ノードの外観のカスタマイズ
• 配色とテーマ
• CSS の統合とカスタムスタイル
• レスポンシブデザインに関する考慮事項

アクセシビリティと方向

📄 読む： references/accessibility-and-orientation.md

• RTL（右から左）レイアウトのサポート
• WCAG アクセシビリティ準拠
• キーボードナビゲーションのサポート
• スクリーンリーダーとの互換性
• デバイスへのレスポンシブ対応

エクスポートと印刷機能

📄 読む： references/export-and-print.md

• エクスポート機能と画像形式
• 印刷機能
• 図データのエクスポート
• 設定オプション
• 一般的なエクスポートの使用例

API リファレンス

📄 参照: references/sankey-props.md • references/sankey-events.md • references/sankey-methods.md • references/sankey-examples.md

• コンポーネントのプロパティ、イベント、メソッドを機械で解析可能な形式で一覧表示
• Syncfusion React Sankey API に基づく、検証済みのデフォルト値、型、簡潔な説明
• 一般的なパターンとメソッドの使用方法を示す実装例

クイックスタートの例

import React from 'react';
import {
  SankeyComponent, Inject, SankeyTooltip, SankeyLegend, SankeyExport,
  SankeyNodeDirective,
  SankeyNodesCollectionDirective,
  SankeyLinkDirective,
  SankeyLinksCollectionDirective
} from '@syncfusion/ej2-react-charts';
import * as ReactDOM from "react-dom";

function BasicSankey() {
  return (
    <div className="control-pane">
      <div className="control-section">
        <SankeyComponent
          width="90%"
          height="420px"
          title="Energy Flow"
          tooltip={{ enable: true }}
          legendSettings={{ visible: true, position: 'Bottom' }}
        >
          <SankeyNodesCollectionDirective>
            <SankeyNodeDirective id="Solar" label={{ text: 'Solar' }} />
            <SankeyNodeDirective id="Generation" label={{ text: 'Generation' }} />
            <SankeyNodeDirective id="Consumption" label={{ text: 'Consumption' }} />
          </SankeyNodesCollectionDirective>
          <SankeyLinksCollectionDirective>
            <SankeyLinkDirective sourceId="Solar" targetId="Generation" value={450} />
            <SankeyLinkDirective sourceId="Generation" targetId="Consumption" value={400} />
          </SankeyLinksCollectionDirective>
          <Inject services={[SankeyTooltip, SankeyLegend, SankeyExport]} />
        </SankeyComponent>
      </div>
    </div>
  );
}

export default BasicSankey;
ReactDOM.render(<BasicSankey />, document.getElementById("charts"));

一般的なパターン

パターン 1：マルチレベルのフロー可視化

複雑なデータ関係を表すために、複数のソースノードと宛先ノードを持つ階層型フローを作成します。

<SankeyComponent title="Process Flow">
  <SankeyNodesCollectionDirective>
    <SankeyNodeDirective id="Input" />
    <SankeyNodeDirective id="Processing" />
    <SankeyNodeDirective id="Output" />
  </SankeyNodesCollectionDirective>
  <SankeyLinksCollectionDirective>
    <SankeyLinkDirective sourceId="Input" targetId="Processing" value={100} />
    <SankeyLinkDirective sourceId="Processing" targetId="Output" value={80} />
  </SankeyLinksCollectionDirective>
  <Inject services={[SankeyTooltip, SankeyLegend]} />
</SankeyComponent>

パターン 2：色の種類を指定したリンクのスタイル設定

colorType を使用して、ソースから色を継承するか、カスタムスタイルを適用するかを指定し、リンクの外観をカスタマイズします。

<SankeyComponent
  linkStyle={{ 
    opacity: 0.6, 
    curvature: 0.55, 
    colorType: 'Source'
  }}
>
  {/* nodes and links */}
  <Inject services={[SankeyTooltip, SankeyLegend]} />
</SankeyComponent>

パターン 3：デバイス検出によるレスポンシブ対応

デバイスの種類に応じてコンポーネントのサイズと表示を調整し、UX を向上させます。

import { Browser } from '@syncfusion/ej2-base';

<SankeyComponent
  height={Browser.isDevice ? '600px' : '450px'}
  labelSettings={{ visible: !Browser.isDevice }}
>
  {/* nodes and links */}
  <Inject services={[SankeyTooltip, SankeyLegend]} />
</SankeyComponent>

主要なプロパティのリファレンス

プロパティ	型	目的
width	string	チャートの幅（例：'90%'、'800px'）
height	string	チャートの高さ（例：'420px'）
title	string	チャートのメインタイトル
subTitle	string	チャートのサブタイトル
tooltip	object	ツールチップの設定
legendSettings	object	凡例の表示と配置
labelSettings	object	ノードラベルの設定
linkStyle	object	リンクのスタイル設定（不透明度、曲率、colorType）

一般的なユースケース

1. エネルギー消費フロー - エネルギー源から発電、配電を経て消費部門に至るまでのエネルギーを追跡します
2. プロセスの依存関係 - ワークフローの段階と、プロセス内のデータの移動を可視化します
3. 組織階層 - 報告体制とリソースの割り当てを表示します
4. サプライチェーンのフロー - サプライヤーから製造を経て流通に至るまでの製品の移動を示します
5. データパイプライン - システムコンポーネント間のデータ変換とルーティングを可視化します

---