syncfusion-maui-treemap

.NET MAUI TreeMap の実装

Syncfusion® .NET MAUI TreeMap（SfTreeMap）は、入れ子になった長方形を使用して階層データを表現する、強力なデータ視覚化コントロールです。各長方形のサイズと色は基盤となるデータ値によって決まり、組織図、ファイルシステム、人口データ、売上分布など、階層構造を持つ大規模なデータセットの視覚化に最適です。

このスキルを使う場面

次のような場合に、このスキルを使用してください。

• 入れ子になった長方形で階層データを視覚化する（サイズはデータの規模を表します）
• 複数レベルに分類されたデータを表示する（例：地域 → 国 → 製品別の売上）
• カテゴリ全体のデータ分布を、値に応じた色で示すヒートマップを作成する
• スペースを効率よく使えるよう、Squarified または Slice-and-Dice レイアウトを実装する
• 凡例とツールチップを使って、対話的にデータを探索できるようにする
• 階層データ項目の選択と操作を可能にする
• さまざまな配色（単色、範囲ベース、彩度低下、パレット）を適用し、データ値を表現する
• リーフ項目、グループヘッダー、境界線、ラベルなどの外観をカスタマイズする

よくある用途には、人口の可視化、売上分析、ファイルストレージの分析、組織階層、予算の内訳など、階層データを面積比で表現する必要があるあらゆる分野があります。

コンポーネントの概要

主な機能：

• データバインディング：階層コレクションにバインドし、自動的に視覚化します
• レイアウトの種類：Squarified（既定）、SliceAndDiceAuto、SliceAndDiceHorizontal、SliceAndDiceVertical
• 階層レベル：GroupPath を使用して、入れ子になったデータ構造を複数レベルでサポートします
• ブラシ設定：柔軟な色付けに対応する 4 種類（Uniform、Range、Desaturation、Palette）
• 凡例：アイコンの種類、配置、テキストスタイルをカスタマイズできる凡例
• ツールチップ：ホバーまたはタップ時にデータの詳細を表示する対話型ツールチップ
• 選択：カスタマイズ可能な強調表示に対応した、単一または複数の選択モード
• アクセシビリティ：キーボードナビゲーション、スクリーンリーダー対応、WCAG 準拠を標準で提供
• カスタマイズ：リーフ項目、ヘッダー、境界線、ラベル、間隔の幅広いスタイル設定

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

はじめに

📄 参照先： references/getting-started.md

• NuGet パッケージのインストール（Syncfusion.Maui.TreeMap）
• ハンドラーの登録（MauiProgram.cs での ConfigureSyncfusionCore）
• XAML と C# での基本的な TreeMap の実装
• データモデルとビューモデルのセットアップ
• DataSource のバインディングと PrimaryValuePath の設定
• LabelPath を使ったラベルの追加
• 最小構成の完全な動作例

参照するタイミング：初期設定と、最初の TreeMap の実装を行う際に、ここから始めてください。

レイアウトの設定

📄 参照先： references/layouts.md

• Squarified レイアウト（最適な縦横比、既定）
• SliceAndDiceAuto レイアウト（方向を自動調整）
• SliceAndDiceHorizontal レイアウト（水平分割）
• SliceAndDiceVertical レイアウト（垂直分割）
• LayoutType プロパティの使い方
• データに適したレイアウトの選択
• レイアウトの種類の視覚的な比較

参照するタイミング：TreeMap のレイアウトアルゴリズムを変更する場合や、データ構造に最適なレイアウトを理解する場合に参照してください。

階層レベル

📄 参照先： references/hierarchical-levels.md

• TreeMap におけるレベルの理解
• 複数レベルの分類に使う GroupPath プロパティ
• 複数のレベルの追加（n レベルのサポート）
• レベルの外観のカスタマイズ（Spacing、HeaderHeight、Background）
• レベルの境界線に使う Stroke と StrokeWidth
• ヘッダーテキストの TextStyle
• グループ項目のブラシ設定（PaletteBrushSettings）

参照するタイミング：複数レベルの階層データ（例：大陸 → 国 → 都市）を実装する場合や、グループヘッダーの外観をカスタマイズする場合に参照してください。

色とブラシの設定

📄 参照： references/brush-settings.md

• UniformBrushSettings（すべての項目に単一の色を適用）
• RangeBrushSettings（From/To による値の範囲ごとの色）
• DesaturationBrushSettings（彩度レベルによるグラデーション）
• PaletteBrushSettings（パレットから複数の色を使用）
• RangeColorValuePath の設定
• 範囲定義の LegendLabel
• 各ブラシタイプを使用する場面

参照するタイミング：データの値、範囲、カテゴリを視覚化するために配色を適用するとき。

リーフ項目のカスタマイズ

📄 参照： references/leaf-item-customization.md

• リーフ項目にテキストを表示する LabelPath
• リーフ項目間の間隔
• リーフの境界線を設定する Stroke と StrokeWidth
• TextStyle の設定（色、フォント、サイズ、属性）
• ラベルのオーバーフローモード（wrap、trim）
• ラベルテンプレートのカスタマイズ
• ShowLabels プロパティ

参照するタイミング：個々のデータ項目（リーフノード）の外観やラベルをカスタマイズするとき。

凡例の設定

📄 参照： references/legend.md

• ShowLegend プロパティによる凡例の有効化
• 凡例の配置（Top、Bottom、Left、Right）
• LegendSettings の設定
• アイコンの種類（Circle、Rectangle、Diamond、Triangle など）
• アイコンサイズのカスタマイズ
• 凡例項目のテキストスタイル
• 凡例項目のテンプレート
• RangeBrushSettings との連携

参照するタイミング：TreeMap の色分けや値の範囲を説明する凡例を追加するとき。

ツールチップの実装

📄 参照： references/tooltip.md

• ShowToolTip プロパティによるツールチップの有効化
• デフォルトのツールチップの動作
• ツールチップテンプレートのカスタマイズ
• TooltipTemplate プロパティの使用方法
• ツールチップ内のデータコンテキスト
• ツールチップの外観のスタイル設定
• リーフ項目とグループ項目のツールチップ

参照するタイミング：ホバーまたはタップ時に追加データを表示するインタラクティブなツールチップを追加するとき。

選択とインタラクション

📄 参照： references/selection-interaction.md

• SelectionMode プロパティ（None、Single、Multiple）
• 単一選択と複数選択の動作
• SelectedItems コレクション
• SelectionChanged イベントの処理
• ハイライト設定（HighlightOnSelection）
• 選択時のストロークと塗りつぶしのカスタマイズ
• プログラムによる選択

参照するタイミング：項目の選択、ハイライト表示、選択イベントへの応答など、ユーザーインタラクション機能を実装するとき。

アクセシビリティとイベント

📄 参照： references/accessibility-events.md

• アクセシビリティサポートの概要
• キーボードナビゲーションのサポート
• WCAG 準拠機能
• ItemSelected イベントと ItemDeselected イベント
• ItemTapped イベント
• ドリルダウン機能
• 右から左への（RTL）サポート
• アクセシビリティのためのセマンティックプロパティ

参照するタイミング：アクセシブルな TreeMap の実装、イベントの処理、RTL 言語のサポートを行うとき。