从邻接模型+嵌套集模型（MPTT）绘制树层次结构的方法

Question

我有一个带有SQL Server DB的.NET Core 2.2应用程序，我正在使用邻接模型+嵌套集模型存储用户的层次结构。我正在使用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。您可以让您的应用生成一个文本文件，然后由称为“点”的实用程序处理该文本文件以生成图形。优点是它是开源的，被广泛使用的跨平台的。缺点是使图表看起来完全像您想要的样子的语法可能会令人困惑。这是我使用您的架构创建的示例。

首先，我创建了一个递归查询以返回记录及其父级。我用名称填充它，就好像它是组织结构图一样。如果您想尝试，可以找到小提琴here，但这是查询...

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"]
}

运行以下命令

  

dot -Tpng test.dot -o test.png

以我的文本文件（test.dot）作为输入，并生成test.png作为输出。输出看起来像这样...

如果您看点语言的参考，您会发现这只是一个简单的示例，您可以做很多事情来影响结果的外观。

因此，您的应用程序可以生成适当的文本，并在幕后使用点来创建图像，然后由您的应用程序显示。