階層データの FlexDiagram

A hierarchical data FlexDiagram automatically generates diagrams from parent-child relationships in a data source.

Each data item can contain child items that define hierarchical relationships within the diagram.

This approach is suitable for:

Organization charts
Category trees
Nested data visualization

Create Hierarchical Data FlexDiagram

1. Define Data Model

C#	コードのコピー
public class DataItem { public string Name { get; set; } public DataItem[] Childs { get; set; } }

2. Create Data Source

C#	コードのコピー
var dataSource = CreateHierarchicalData();

3. Bind Data to FlexDiagram

C#	コードのコピー
var d = (IDiagram)diagram; d.DataSource = dataSource; d.Binding = "Type"; d.ChildItemsPath = "Items";

Hierarchical Data FlexDiagram Sample

XAML

XAML	コードのコピー
<Window x:Class="FlexDiagramWPF_Hierarchical.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Hierarchical FlexDiagram" Height="450" Width="800"> <Grid> <c1:FlexDiagram x:Name="diagram" ScaleMode="ScaleToFit" Direction="LeftRight"/> </Grid> </Window>

コードのコピー

<Window x:Class="FlexDiagramWPF_Hierarchical.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Hierarchical FlexDiagram" Height="450" Width="800">
  <Grid>
    <c1:FlexDiagram x:Name="diagram"
                    ScaleMode="ScaleToFit"
                    Direction="LeftRight"/>
  </Grid>
</Window>

Code Behind

C#	コードのコピー
using System; using System.Windows; using C1.Diagram; using C1.WPF.Diagram; namespace FlexDiagramWPF_Hierarchical { public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); InitializeDiagram(); } private void InitializeDiagram() { // Layout direction diagram.Direction = DiagramDirection.LeftRight; // Create hierarchical data var data = DataService.CreateHierarchicalData(); // IMPORTANT: cast to IDiagram var d = (IDiagram)diagram; // Bind data d.DataSource = data; d.Binding = "Type"; d.ChildItemsPath = "Items"; // Refresh diagram diagram.UpdateLayout(); diagram.Invalidate(); } } // Data Model public class SalesDataItem { public string? Type { get; set; } public double Sales { get; set; } public SalesDataItem[]? Items { get; set; } } // Data Provider static class DataService { static Random rnd = new Random(); static int rand() => rnd.Next(10, 100); public static SalesDataItem[] CreateHierarchicalData() { return new SalesDataItem[] { new SalesDataItem { Type = "Electronics", Items = new SalesDataItem[] { new SalesDataItem { Type = "Camera", Items = new SalesDataItem[] { new SalesDataItem { Type = "Digital", Sales = rand() }, new SalesDataItem { Type = "Film", Sales = rand() } } }, } }, new SalesDataItem { Type = "Computers\n& Tablets", Items = new SalesDataItem[] { new SalesDataItem { Type = "Desktops", Items = new SalesDataItem[] { new SalesDataItem { Type = "All-in-ones", Sales = rand() }, new SalesDataItem { Type = "Minis", Sales = rand() } } }, } } }; } } }

コードのコピー

using System;
using System.Windows;
using C1.Diagram;
using C1.WPF.Diagram;
namespace FlexDiagramWPF_Hierarchical
{
  public partial class MainWindow : Window
  {
    public MainWindow()
    {
      InitializeComponent();
      InitializeDiagram();
    }
    private void InitializeDiagram()
    {
      // Layout direction
      diagram.Direction = DiagramDirection.LeftRight;
      // Create hierarchical data
      var data = DataService.CreateHierarchicalData();
      // IMPORTANT: cast to IDiagram
      var d = (IDiagram)diagram;
      // Bind data
      d.DataSource = data;
      d.Binding = "Type";
      d.ChildItemsPath = "Items";
      // Refresh diagram
      diagram.UpdateLayout();
      diagram.Invalidate();
    }
  }
  // Data Model
  public class SalesDataItem
  {
    public string? Type { get; set; }
    public double Sales { get; set; }
    public SalesDataItem[]? Items { get; set; }
  }
  // Data Provider
  static class DataService
  {
    static Random rnd = new Random();
    static int rand() => rnd.Next(10, 100);
    public static SalesDataItem[] CreateHierarchicalData()
    {
      return new SalesDataItem[]
      {
        new SalesDataItem
        {
          Type = "Electronics",
          Items = new SalesDataItem[]
          {
            new SalesDataItem
            {
              Type = "Camera",
              Items = new SalesDataItem[]
              {
                new SalesDataItem { Type = "Digital", Sales = rand() },
                new SalesDataItem { Type = "Film", Sales = rand() }
              }
            },
          }
        },
        new SalesDataItem
        {
          Type = "Computers\n& Tablets",
          Items = new SalesDataItem[]
          {
            new SalesDataItem
            {
              Type = "Desktops",
              Items = new SalesDataItem[]
              {
                new SalesDataItem { Type = "All-in-ones", Sales = rand() },
                new SalesDataItem { Type = "Minis", Sales = rand() }
              }
            },
          }
        }
      };
    }
  }
}