8、使用 D3 进行分层数据可视化

使用 D3 进行分层数据可视化

在数据可视化领域，分层数据的可视化是一项重要的任务。D3（Data-Driven Documents）是一个强大的 JavaScript 库，可用于创建各种交互式数据可视化。本文将介绍如何使用 D3 对分层数据进行可视化，包括普通树状图和径向树状图的创建。

数据预处理

在进行可视化之前，我们需要对输入的 CSV 文件进行预处理，将其转换为我们需要的 CSV 文件。具体步骤如下：
1. 加载数据并分割 ：使用 d3.dsvFormat('|').parseRows(fileData.toString()) 加载数据，并按 | 分隔符进行分割。
2. 过滤字段 ：过滤出用于创建树的 [TU] 字段和用于添加英文描述（如果可用）的 [VR] 字段。
3. 转换描述字段 ：将描述字段转换为键值对映射（ descriptionMap ），键为 id ，以便在创建最终行时进行简单查找。
4. 转换为 JavaScript 对象 ：将 [TU] 字段数组中的每一行转换为一个简单的 JavaScript 对象，包含 id 、 parentId 、 name 和 description