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 和 descriptio