使用D3可视化复杂层次数据

由于现实世界中存在大量的层次结构信息（如系统文件夹结构、动植物分类、公司管理等），而树图是存储层次信息的理想数据结构，因此在许多应用中都需要一种有效的树可视化方法。本文介绍了我们考虑的可视化方法，并描述了它们的优缺点和最合适的用法。

最近，我们的团队在一家大型科技公司的项目中遇到了这个可视化挑战，该公司需要一个解决方案，使管理人员能够看到整个组织或其部分的概览，并找到需要改进的地方。对于此任务，我们需要可视化组织结构，并根据其度量值对树中的每个节点进行颜色编码。

数据结构看起来像是团队和项目的树，其中的高度可以达到数百层（团队可以嵌套在团队中，项目可以嵌套在项目中）。然而，当存在大量子节点时，可视化目录的内容（组织结构）是一个挑战。如果图由少量节点组成，则数据很容易解码和理解，但是，随着显示的节点越多，就越难对其进行缩放并有效利用空间。由于传统的节点链接图不适用于大数据量的可视化（因为空间有限），因此该解决方案不能用于上述目的。因此，我们需要为企业数据可视化找到一种替代解决方案。

为了找到最适合该问题的解决方案，我们的团队调查并估计了不同层次数据可视化如何与给定数据集一起工作。

估计的可视化不仅可以用于这种情况，还可以用于解决树数据结构需要可视化且每个节点都有一些元数据也需要显示时的一组问题。例如，文件系统文件夹结构、家谱树、分类树（例如动物/植物分类）、公司内部团队/项目的层次结构、公司管理层次结构等。

我们使用不同大小的数据集估计了许多不同的层次可视化，以更好地了解它们的优缺点和合适的数据集大小。我们在本文中描述的选项包括：

• 冰柱图
• 日出图
• 矩形树映射
• 圆形树图

我们创建了一个方便的React+D3概念验证应用程序，允许您尝试不同的数据集和图表。

也称为火焰图或分区图，它显示一个层次结构，其中树的节点由相邻的矩形表示，这些矩形根据深度逐步排列。你可以查看它在这里.

也称为火焰图或分区图，它显示一个层次结构，其中树的节点由相邻的矩形表示，这些矩形根据深度逐步排列。

该图表的优点是很容易看到集群、集群的大小以及集群所处的级别。此外，它们非常适合探索数据中的关系，尤其是具有诸如缩放和重新聚集等交互功能的数据。

此图表使用屏幕空间的效率不如sunburst或树状图，因此它更适合较小的数据集。

Sunburst可视化显示了一种分层结构，其中树的每个数据节点都由多层环内的角段表示。基本上，这张图是一个冰柱树，但用弧线代替了矩形，这使得Sunburst可以更有效地利用空间。你可以查看它在这里.

Pros与冰柱图类似–簇大小、级别和关系一目了然，缩放可以快速轻松地进行探索。Sunburst也有效地利用了空间，因此它适用于更大的数据集（与冰柱图相比）。

另一方面，缺点是视觉上的复杂性更高——这张图表对于首次使用的用户来说，比冰柱树更难阅读，因为线段的方向会发生变化。圆弧段也使读取其中的标签变得更加困难。

树状图采用不同的方法表示层次结构：它们在父节点内显示子节点。这有助于第一次使用户在可视化层次结构（如文件夹结构或预算分配）时一目了然地理解关系，因为一件事在另一件事中的关系与实际情况相匹配。

下面介绍了树映射可视化的几种不同选项。

矩形或方形树映射显示一个层次结构，其中树的节点表示为嵌套的矩形块。你可以查看它在这里.

此图表的主要优点是空间使用率。矩形段可以使用大部分可用的监视器空间，因此与此处查看的所有其他图表相比，矩形树状图将在单个屏幕上容纳最多的信息。其他优点是良好的父子关系可视性和容易比较节点大小。当添加交互式缩放和平移时，此图表也变得易于阅读和探索。

这张图的缺点在一定程度上源于它的优点：在父母内部嵌套孩子会使树形图难以彩色阅读，如果没有额外的边界或深度颜色编码，相同颜色的父子段很难区分。此外，有效的屏幕空间使用可能会导致大型复杂数据集的图表信息过载；然而，这可以通过基于缩放显示/隐藏树级别来避免。

“环形”树图显示了一个层次结构，其中树的节点表示为嵌套的圆。

此图表在结构上与矩形树映射图相似，并且具有类似的优点：父子关系一目了然，节点大小易于进行可视化比较。它并没有有效地利用屏幕空间，但这可能是一个优势，因为圆段不像矩形那样紧密堆积，这样可以使图表更容易阅读。你可以查看它在这里.

如您所见，在可视化层次化数据集时有许多选项，每种选项都有其优缺点，您需要了解这些优缺点，以了解哪一种适合您的特定情况。找到合适的可视化效果的最佳方法是在POC应用程序。我们对客户的数据进行了此操作，并选择了方形树映射选项，因为它最有效地使用了屏幕空间，并且显示了“父-子”关系。

相关阅读
将D3.js与React.js结合使用：八步综合手册