Способ рисования древовидной иерархии из модели смежности + модели вложенных множеств (MPTT)

Question

У меня есть приложение .NET Core 2.2 с БД SQL Server, и я храню иерархию пользователей, используя модель смежности + модель вложенных множеств. Я использую EF Core. Мой домен выглядит так:

    public class MatrixPosition
    {
        public Guid Id { get; set; }
        public string Name { get; set; }
        public Guid? ParentId { get; set; }
        public int Left { get; set; }
        public int Right { get; set; }
        public int DepthLevel { get; set; }
}

Самый верхний элемент имеет, конечно, ParentId = null и DepthLevel = 0

Я хотел бы показать эту структуру как некоторую графику древовидной структуры. У кого-нибудь были идеи или рабочие примеры этого?

Answer 1

Один из подходов, которые я использовал в прошлом, - это перенести часть тяжелой работы на внешнюю среду, такую ​​как Graphviz .Ваше приложение может создать текстовый файл, который обрабатывается утилитой «точка» для создания графики.Плюсы в том, что он с открытым исходным кодом, широко используется и кроссплатформенный.Минусы в том, что синтаксис, чтобы диаграмма выглядела именно так, как вы хотите, может сбивать с толку.Вот пример, который я создал, используя вашу схему.

Сначала я создал рекурсивный запрос для возврата записей и их родителей.Я заполнил его именами, как если бы это была диаграмма организации.Вы можете найти скрипку здесь , если хотите поэкспериментировать, но вот запрос ...

WITH cteEEs AS (
  SELECT employees.Id, employees.ParentId, employees.Name, employees.[Left], employees.[Right] FROM employees WHERE employees.ParentId IS NULL
  UNION ALL 
  SELECT employees.Id, employees.ParentId, employees.Name, employees.[Left], employees.[Right] FROM employees JOIN cteEEs ON (employees.ParentId = cteEEs.Id)
)

SELECT * FROM cteEEs

Используя следующий код ...

var nodeRelationships = new StringBuilder();
var nodeDetails = new StringBuilder();

foreach(var node in results)
{
    if(!string.IsNullOrEmpty(node.ParentId))
    {
        nodeRelationships.AppendLine($"\t\"{node.ParentId}\" -> \"{node.Id}\"");
    }

    nodeDetails.AppendLine($"\t\"{node.Id}\" [label=\"{node.Name}\"]");
}

using(StreamWriter sw = new StreamWriter(@"c:\temp\test.dot"))
{
    sw.WriteLine("digraph G {");
    sw.Write(nodeRelationships.ToString());
    sw.Write(nodeDetails.ToString());
    sw.WriteLine("}");
}

... Я могу создать следующий текстовый файл ...

digraph G {
    "bec9439f-d4fb-4ee5-9d69-c33f54f91124" -> "79b5be71-0e01-4d0c-9640-ddfd98634b96"
    "bec9439f-d4fb-4ee5-9d69-c33f54f91124" -> "a5718293-1f93-4450-ad92-a89458d5600e"
    "a5718293-1f93-4450-ad92-a89458d5600e" -> "eaf07cbc-fd5c-4cc5-829e-166ff20b2ef9"
    "a5718293-1f93-4450-ad92-a89458d5600e" -> "7b4dbc24-6ab6-4585-bca3-95888c713f3c"
    "bec9439f-d4fb-4ee5-9d69-c33f54f91124" [label="Doe, Jane"]
    "79b5be71-0e01-4d0c-9640-ddfd98634b96" [label="Smith, Jim"]
    "a5718293-1f93-4450-ad92-a89458d5600e" [label="Jones, Bill"]
    "eaf07cbc-fd5c-4cc5-829e-166ff20b2ef9" [label="Adams, Sherri"]
    "7b4dbc24-6ab6-4585-bca3-95888c713f3c" [label="Walker, Dan"]
}

Выполнить следующую команду

точка -Tpng test.dot -o test.png

принимает мой текстовый файл (test.dot) в качестве входных данных и создает test.png в качестве выходных данных.Вывод выглядит следующим образом ...

Если вы посмотрите на ссылку для точечного языка, вы обнаружите, что это голые костиНапример, есть много вещей, которые вы можете сделать, чтобы повлиять на внешний вид результата.

Итак, ваше приложение может создать соответствующий текст и использовать точку за сценой, чтобы создать изображение, которое затем отобразит ваше приложение.