syncfusion-wpf-treemap

Syncfusion WPF TreeMap（SfTreeMap）の実装

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

ユーザーが次のことを必要としている場合に、このスキルを使用します。

• 階層データを可視化する：数量を表す、サイズの異なる入れ子状の長方形として表示します
• 大規模なデータセットを表示する：TreeMapの省スペースなレイアウトが最適な場合に使用します
• データ可視化を実装する：株式市場の分析、使用状況の統計、カテゴリ分けされたデータなどに使用します
• ヒートマップを作成する：色で値を、サイズで重みを表します
• WPFアプリケーションを構築する：Syncfusion TreeMapコントロール（SfTreeMap）が必要な場合に使用します
• TreeMapのレイアウト、色、レベル、インタラクティブ機能をカスタマイズする
• 階層構造またはフラットなデータ構造のデータバインディングを設定する

このスキルでは、基本的なセットアップからドリルダウン、カラーマッピング、カスタムテンプレートなどの高度な機能まで、Syncfusion WPF TreeMapの実装全体を扱います。

コンポーネントの概要

**Syncfusion WPF TreeMap（SfTreeMap）**は、階層情報を、グループ化された一連の長方形として表示するデータ可視化コントロールです。各長方形のサイズは数量値（重み）を表し、色はデータの別の側面を表します。

主な機能：

• 複数のレイアウトアルゴリズム（Squarified、SliceAndDiceの各種）
• 柔軟なカラーマッピング方式（単色、範囲、彩度低下、パレット、グループ別）
• カスタマイズ可能なヘッダーを備えた階層レベル
• インタラクティブ機能（選択、ツールチップ、ドリルダウン）
• 包括的なデータバインディングのサポート
• アクセシビリティとキーボードナビゲーション
• テーマのサポート

一般的な使用例：

1. 株式市場の分析 - 長方形のサイズ＝株式の重み、色＝値上がり／値下がり
2. インターネット利用状況の可視化 - トラフィックを種類別に分類（小売、ソーシャル、検索）
3. ニュースの集約 - 色＝セクション（ビジネス／政治）、サイズ＝記事数
4. 気象分析 - 不透明度／色＝湿度、サイズ＝地理的な面積

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

はじめに

📄 参照： references/getting-started.md

• インストールとパッケージのセットアップ
• アセンブリと名前空間の参照（Syncfusion.SfTreeMap.WPF）
• Visual Studio、Expression Blend、またはコードを使用したTreeMapの作成
• XAMLとC#での基本的なTreeMapの設定
• データモデルを使用したItemsSourceの設定
• DataContextの設定
• 人口データを使用した最初の実用例
• テーマのサポート（SfSkinManager、ThemeStudio）

レイアウトモード

📄 参照： references/layout-modes.md

• 使用可能なレイアウトアルゴリズム
• Squarifiedレイアウト（デフォルト、縦横比を最適化）
• SliceAndDiceAuto（レベルごとに横方向／縦方向を切り替え）
• SliceAndDiceHorizontal（横方向の分割のみ）
• SliceAndDiceVertical（縦方向の分割のみ）
• データに適したレイアウトの選択
• パフォーマンスに関する考慮事項

データバインディングと設定

📄 参照： references/data-binding.md

• WeightValuePathプロパティ（長方形のサイズを決定）
• ColorValuePathプロパティ（カラーマッピングを指定）
• コレクションへのItemsSourceバインディング
• データモデルの要件と構造
• 階層データとフラットデータのデータバインディング
• サポートされるコレクションの種類（ObservableCollection、Listなど）

カラーマッピング

📄 参照： references/color-mapping.md

• カラーマッピングの概要と種類
• UniColorMapping（すべてのリーフに適用する単色）
• RangeBrushColorMapping（値の範囲に基づく色）
• DesaturationColorMapping（視覚的な強調に使用する不透明度の範囲）
• PaletteColorMapping（色のコレクションを順に適用）
• GroupColorMapping（グループごとに異なる色）
• LeafColorMappingとTreeMapLevelのColorMapping
• リーフノードまたはヘッダーへの色の適用

ツリーマップのレベルと階層

📄 参照： references/levels-and-hierarchy.md

• フラットなデータをグループ化する TreeMapFlatLevel
• 階層構造を整理する GroupPath プロパティ
• 複数レベルの設定
• グループ間の間隔を設定する GroupGap
• ヘッダーの設定（HeaderHeight、ShowHeader）
• ヘッダーのテンプレートとスタイル設定
• 葉ノードのラベルを表示する ShowLabels プロパティ
• 入れ子になった階層の作成

葉ノードのカスタマイズ

📄 参照： references/leaf-customization.md

• LeafItemSettings の概要
• 枠線のカスタマイズ（LeafBorderBrush、LeafBorderThickness）
• 葉ノードにテキストを表示する LeafLabelPath
• 葉ノードの UI をカスタマイズする LeafTemplate
• ラベルの配置と書式設定
• 個々の葉ノードの外観のカスタマイズ
• 複雑な葉ノードのコンテンツ向けテンプレートの例

ヘッダーとラベル

📄 参照： references/headers-and-labels.md

• ヘッダーのテンプレート（HeaderTemplate プロパティ）
• ヘッダーのスタイル設定とカスタマイズ
• ラベルの表示とコンテンツの制御
• データバインディングによるカスタムヘッダーコンテンツ
• レベル内でのヘッダーの配置

インタラクティブ機能

📄 参照： references/interactive-features.md

• 選択のサポート（単一選択および複数選択）
• SelectionModes（Default、Multiple）
• SelectedItems プロパティと選択イベント
• ツールチップの設定と表示
• カスタムツールチップ用の TooltipTemplate
• ドリルダウンナビゲーションのサポート
• DrillDownHeaderTemplate のカスタマイズ
• EnableDrillDown プロパティ

凡例

📄 参照： references/legend.md

• 凡例の概要と目的
• ShowLegend プロパティ
• LegendType（Gradient、DockPosition）
• LegendHeight と LegendWidth の設定
• カスタム凡例用の LegendTemplate
• 凡例の配置オプション

アクセシビリティ

📄 参照： references/accessibility.md

• キーボード操作のサポート
• Tab と Shift+Tab による項目間の移動
• キーボード操作に対する SelectionModes の影響
• WCAG 準拠の機能
• スクリーンリーダーのサポート

クイックスタートの例

人口データを表示する機能的なツリーマップを作成する、最小限の例を紹介します。

<Window x:Class="TreeMapDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.TreeMap;assembly=Syncfusion.SfTreeMap.WPF"
        Title="TreeMap Demo" WindowState="Maximized">
    <Grid>
        <Grid.DataContext>
            <local:PopulationViewModel/>
        </Grid.DataContext>
        
        <syncfusion:SfTreeMap ItemsSource="{Binding PopulationDetails}" 
                              WeightValuePath="Population"
                              ColorValuePath="Growth"
                              ItemsLayoutMode="Squarified">
            
            
            <syncfusion:SfTreeMap.LeafColorMapping>
                <syncfusion:RangeBrushColorMapping>
                    <syncfusion:RangeBrushColorMapping.Brushes>
                        <syncfusion:RangeBrush From="0" To="1" Color="#A4C400"/>
                        <syncfusion:RangeBrush From="1" To="2" Color="#AA00FF"/>
                        <syncfusion:RangeBrush From="2" To="3" Color="#F0A30A"/>
                        <syncfusion:RangeBrush From="3" To="4" Color="#1BA1E2"/>
                    </syncfusion:RangeBrushColorMapping.Brushes>
                </syncfusion:RangeBrushColorMapping>
            </syncfusion:SfTreeMap.LeafColorMapping>
            
            
            <syncfusion:SfTreeMap.Levels>
                <syncfusion:TreeMapFlatLevel GroupPath="Continent" 
                                             GroupGap="10"
                                             HeaderHeight="30">
                    <syncfusion:TreeMapFlatLevel.HeaderTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Header}" 
                                      Foreground="#D6D6D6" 
                                      FontSize="18" 
                                      FontWeight="Light"/>
                        </DataTemplate>
                    </syncfusion:TreeMapFlatLevel.HeaderTemplate>
                </syncfusion:TreeMapFlatLevel>
            </syncfusion:SfTreeMap.Levels>
        </syncfusion:SfTreeMap>
    </Grid>
</Window>

// ViewModel with sample data
public class PopulationViewModel
{
    public ObservableCollection<PopulationDetail> PopulationDetails { get; set; }
    
    public PopulationViewModel()
    {
        PopulationDetails = new ObservableCollection<PopulationDetail>
        {
            new PopulationDetail { Continent = "Asia", Country = "Indonesia", Growth = 3, Population = 237641326 },
            new PopulationDetail { Continent = "Asia", Country = "Russia", Growth = 2, Population = 152518015 },
            new PopulationDetail { Continent = "North America", Country = "United States", Growth = 4, Population = 315645000 },
            new PopulationDetail { Continent = "Europe", Country = "Germany", Growth = 1, Population = 81993000 }
        };
    }
}

public class PopulationDetail
{
    public string Continent { get; set; }
    public string Country { get; set; }
    public double Growth { get; set; }
    public double Population { get; set; }
}

よくあるパターン

パターン 1：単一レベルの基本的なツリーマップ

階層的なグループ化をせずにフラットなデータを表示する場合：

<syncfusion:SfTreeMap ItemsSource="{Binding Items}" 
                      WeightValuePath="Value"
                      ItemsLayoutMode="Squarified">
    <syncfusion:SfTreeMap.LeafColorMapping>
        <syncfusion:UniColorMapping Color="Crimson"/>
    </syncfusion:SfTreeMap.LeafColorMapping>
</syncfusion:SfTreeMap>

パターン 2：複数レベルの階層

入れ子になった階層データ（例：大陸 → 国）を表示する場合：

<syncfusion:SfTreeMap.Levels>
    <syncfusion:TreeMapFlatLevel GroupPath="Continent" GroupGap="10" HeaderHeight="30"/>
    <syncfusion:TreeMapFlatLevel GroupPath="Country" GroupGap="5" HeaderHeight="20" ShowLabels="True"/>
</syncfusion:SfTreeMap.Levels>

パターン 3：範囲ベースのカラー マッピング

値の範囲に基づいて矩形を色分けする場合：

<syncfusion:SfTreeMap.LeafColorMapping>
    <syncfusion:RangeBrushColorMapping>
        <syncfusion:RangeBrushColorMapping.Brushes>
            <syncfusion:RangeBrush From="0" To="25" Color="LightGreen"/>
            <syncfusion:RangeBrush From="25" To="50" Color="Yellow"/>
            <syncfusion:RangeBrush From="50" To="75" Color="Orange"/>
            <syncfusion:RangeBrush From="75" To="100" Color="Red"/>
        </syncfusion:RangeBrushColorMapping.Brushes>
    </syncfusion:RangeBrushColorMapping>
</syncfusion:SfTreeMap.LeafColorMapping>

パターン 4：選択とインタラクション

ユーザー操作を有効にする場合：

<syncfusion:SfTreeMap SelectionModes="Multiple">
    
</syncfusion:SfTreeMap>

パターン 5：カスタムツールチップ

ホバー時に詳細情報を表示する場合：

<syncfusion:SfTreeMap>
    <syncfusion:SfTreeMap.TooltipTemplate>
        <DataTemplate>
            <StackPanel Background="White" Margin="5">
                <TextBlock Text="{Binding Country}" FontWeight="Bold"/>
                <TextBlock Text="{Binding Population, StringFormat='Population: {0:N0}'}"/>
            </StackPanel>
        </DataTemplate>
    </syncfusion:SfTreeMap.TooltipTemplate>
</syncfusion:SfTreeMap>

主なプロパティ

必須プロパティ

• ItemsSource - 視覚化するデータオブジェクトのコレクション
• WeightValuePath - 矩形のサイズを決定するプロパティ名
• ColorValuePath - 色のマッピングに使用する値のプロパティ名
• ItemsLayoutMode - レイアウトアルゴリズム（Squarified、SliceAndDiceAuto など）

カラーマッピングのプロパティ

• LeafColorMapping - 葉ノードのカラーマッピング方法
• RangeBrushColorMapping.Brushes - 値に基づく色分けに使用する色の範囲
• DesaturationColorMapping - 不透明度に基づくカラーマッピング
• PaletteColorMapping.Colors - 順番に適用する色のコレクション

レベルの設定

• Levels - TreeMapFlatLevel オブジェクトのコレクション
• GroupPath - 各レベルでデータをグループ化するためのプロパティ名
• GroupGap - グループ間の間隔（ピクセル単位）
• HeaderHeight - グループヘッダーの高さ
• HeaderTemplate - ヘッダー用のカスタムテンプレート
• ShowHeader - レベル内のヘッダーの表示／非表示
• ShowLabels - 葉ノードのラベルの表示／非表示

リーフのカスタマイズ

• LeafItemSettings - リーフノードの外観設定
• LeafBorderBrush - リーフノードの境界線の色
• LeafBorderThickness - リーフノードの境界線の太さ
• LeafLabelPath - リーフラベルのプロパティ名
• LeafTemplate - リーフコンテンツ用のカスタムテンプレート

インタラクティブ機能

• SelectionModes - 選択動作（Default、Multiple）
• SelectedItems - 現在選択されている項目のコレクション
• TooltipTemplate - ツールチップ用のカスタムテンプレート
• EnableDrillDown - ドリルダウンナビゲーションを有効にします
• DrillDownHeaderTemplate - ドリルダウンヘッダー用のテンプレート

凡例のプロパティ

• ShowLegend - 凡例の表示／非表示
• LegendType - 凡例の表示タイプ
• LegendHeight/LegendWidth - 凡例のサイズ
• LegendTemplate - 凡例用のカスタムテンプレート

一般的なユースケース

ユースケース 1：株式ポートフォリオの可視化

長方形のサイズを投資額、色をパフォーマンスとして株式保有状況を表示します。

ガイダンス： 負の値（赤）から正の値（緑）までの範囲で、RangeBrushColorMapping を使用します。WeightValuePath に投資額、ColorValuePath に損益率を設定します。

参考資料： color-mapping.md、data-binding.md

ユースケース 2：ディスク使用量の分析

ファイルシステム階層内のフォルダーサイズを表示します。

ガイダンス： フォルダー階層に GroupPath を使用し、複数レベルの TreeMapFlatLevel を設定します。WeightValuePath にファイルサイズを設定します。視認性を高めるため、SliceAndDiceAuto レイアウトの使用を検討してください。

参考資料： levels-and-hierarchy.md、layout-modes.md

ユースケース 3：売上実績ダッシュボード

地域や営業担当者ごとの売上を表示します。

ガイダンス： 2 つのレベル（地域 → 営業担当者）を作成し、DesaturationColorMapping を使用して、色を濃くすることで上位の実績を強調します。詳細な指標を表示するには、ツールチップを有効にします。

参考資料： interactive-features.md、levels-and-hierarchy.md

ユースケース 4：ウェブサイトのトラフィック分析

カテゴリやページごとのページビューを可視化します。

ガイダンス： カテゴリごとに異なる色を割り当てるには、PaletteColorMapping を使用します。ページ名や指標を表示するカスタム LeafTemplate を追加します。ナビゲーション用にドリルダウンを有効にします。

参考資料： color-mapping.md、leaf-customization.md、interactive-features.md

ユースケース 5：気象データの可視化

地理的な地域ごとの気温や降水量データを表示します。

ガイダンス： 不透明度で湿度や降水量を表す DesaturationColorMapping を使用します。地域ごとに基本色を設定する GroupColorMapping を構成します。

参考資料： color-mapping.md

アセンブリと名前空間

アセンブリ： Syncfusion.SfTreeMap.WPF
名前空間： Syncfusion.UI.Xaml.TreeMap

次の名前空間を XAML に追加します。

xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.TreeMap;assembly=Syncfusion.SfTreeMap.WPF"

追加リソース

テーマのサポート：

• SfSkinManager を使用してテーマを適用します
• ThemeStudio でカスタムテーマを作成します
• 参照： references/getting-started.md

アクセシビリティ：

• キーボードナビゲーション（Tab/Shift+Tab）
• WCAG 準拠
• 参照： references/accessibility.md

---

次のステップ：

1. インストールとセットアップについては、getting-started.md を確認します
2. layout-modes.md から適切なレイアウトを選択します
3. data-binding.md を使用してデータバインディングを構成します
4. color-mapping.md の色マッピング手法を適用します
5. 必要に応じて、levels-and-hierarchy.md を参考にレベルと階層を追加します