フラット/表形式データの FlexDiagram

A flat or tabular data FlexDiagram generates hierarchical diagrams from structured datasets such as tables or database results.

Each column specified in the Binding property represents a hierarchy level in the generated diagram.

This approach is suitable for:

Database-driven structures
Spreadsheet-based data
Multi-level categorization
Structured business data

Create Flat/Tabular Data FlexDiagram

1. Create Data Table

C#	コードのコピー
DataTable table = new DataTable(); table.Columns.Add("Field"); table.Columns.Add("Domain"); table.Columns.Add("Specialty"); table.Columns.Add("Skill");

2. Bind Data to FlexDiagram

In WPF, cast the diagram to IDiagram before binding tabular data.

C#	コードのコピー
var d = (IDiagram)diagram;d.DataSource = table; d.Binding = "Field,Domain,Specialty,Skill";

Flat/Tabular Data FlexDiagram Sample

XAML

XAML	コードのコピー
<Window x:Class="FlexDiagramWPF_TabularData.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="Flat Data FlexDiagram" Height="450" Width="800"> <Grid> <c1:FlexDiagram x:Name="diagram" ScaleMode="ScaleToFit"/> </Grid> </Window>

コードのコピー

<Window x:Class="FlexDiagramWPF_TabularData.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="Flat Data FlexDiagram" Height="450" Width="800">
  <Grid>
    <c1:FlexDiagram x:Name="diagram" ScaleMode="ScaleToFit"/>
  </Grid>
</Window>

Code Behind

C#	コードのコピー
using System.Windows; using System.Data; using C1.Diagram; using C1.WPF.Diagram; namespace FlexDiagramWPF_TabularData { public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); InitializeDiagram(); } private void InitializeDiagram() { // Layout direction diagram.Direction = DiagramDirection.LeftRight; // Create data var table = CreateSkillsTable(); // IMPORTANT: WPF requires casting var d = (IDiagram)diagram; // Bind flat data d.DataSource = table; // Define hierarchy levels d.Binding = "Field,Domain,Specialty,Skill"; } private DataTable CreateSkillsTable() { DataTable table = new DataTable(); table.Columns.Add("Field"); table.Columns.Add("Domain"); table.Columns.Add("Specialty"); table.Columns.Add("Skill"); table.Rows.Add("Technology", "Frontend", "JavaScript Frameworks", "React Development"); table.Rows.Add("Technology", "Data Science", "AI", "Machine Learning"); table.Rows.Add("Technology", "Database", "Query", "SQL Optimization"); table.Rows.Add("Technology", "Backend", "Languages", "Python Programming"); table.Rows.Add("Technology", "Infrastructure", "AWS", "Cloud Architecture"); return table; } } }

コードのコピー

using System.Windows;
using System.Data;
using C1.Diagram;
using C1.WPF.Diagram;
namespace FlexDiagramWPF_TabularData
{
  public partial class MainWindow : Window
  {
    public MainWindow()
    {
      InitializeComponent();
      InitializeDiagram();
    }
    private void InitializeDiagram()
    {
      // Layout direction
      diagram.Direction = DiagramDirection.LeftRight;
      // Create data
      var table = CreateSkillsTable();
      // IMPORTANT: WPF requires casting
      var d = (IDiagram)diagram;
      // Bind flat data
      d.DataSource = table;
      // Define hierarchy levels
      d.Binding = "Field,Domain,Specialty,Skill";
    }
    private DataTable CreateSkillsTable()
    {
      DataTable table = new DataTable();
      table.Columns.Add("Field");
      table.Columns.Add("Domain");
      table.Columns.Add("Specialty");
      table.Columns.Add("Skill");
      table.Rows.Add("Technology", "Frontend", "JavaScript Frameworks", "React Development");
      table.Rows.Add("Technology", "Data Science", "AI", "Machine Learning");
      table.Rows.Add("Technology", "Database", "Query", "SQL Optimization");
      table.Rows.Add("Technology", "Backend", "Languages", "Python Programming");
      table.Rows.Add("Technology", "Infrastructure", "AWS", "Cloud Architecture");
      return table;
    }
  }
}