使用JavaScript构建树形图

树形图可视化广泛用于分层数据分析。如果你没有经验还想创建一个，那将会有些复杂。下面是一个详细教程，教你如何使用JavaScript创建交互式树形图。

宇宙中只有我们吗？我们每个人都曾在某个时候问过自己这个问题。当我们在考虑地球是否是宇宙中唯一可居住的行星时，我们可能会思考宇宙究竟有多大。让我们在树形图的帮助下看看吧！在本教程中，我们将使用树形映射出宇宙中已知的10个最大的星系。

什么是树形图？

在进入教程之前，了解一下树形图的概念。树形图是一种流行的技术，用于将分层组织、树状结构的数据可视化。它可以一目了然地展示出层次结构以及各个数据点的值，它使用了大小与相应数量成比例的嵌套矩形。

树的每个分支都是一个矩形，对于子分支，其中嵌套了较小的矩形。通过颜色和接近度显示数据，树形图可以轻松表示大量数据，同时有效利用空间，非常适合比较层次结构中的比例。

树形图类型是由Ben Shneiderman教授发明的，他在信息设计和人机交互领域作出了重大贡献。树形图被用于许多数据可视化领域，可用于分析股票市场、人口普查系统和选举统计数据，以及数据新闻、硬盘探索工具等。

浏览JS树形图

下面将使用JavaScript构建一个树形图来比较已知宇宙中排名前10的星系的大小。JS树状图在本教程结束时的样子：

创建一个基本的JS树形图

创建基于JavaScript的树状图通常需要以下四个基本步骤：

1.