如何用D3.js从CSV生成树形层级？D3.nest无法生成含children的树

我有如下CSV数据：

world,country,state
World,US,CA
World,US,NJ
World,INDIA,OR
World,INDIA,AP

我需要将其转换为如下所示的树形层级结构：

{ 
  "name": "World", 
  "children": [ 
    { "name": "US", "children": [ { "name": "CA" }, { "name": "NJ" } ] }, 
    { "name": "INDIA", "children": [ { "name": "OR" }, { "name": "AP" } ] } 
  ] 
};

我使用d3.nest只能得到JSON数组，无法生成带有'children'字段的树形结构，请问还需要进行哪些额外操作？查阅API文档后仍未找到解决方案……

我之前也碰到过这个问题！d3.nest的设计就是生成key-values形式的嵌套分组结构，不会直接输出带children字段的树形结构，但只需要在nest的结果上做一层简单的映射转换就能得到你想要的结构。

步骤1：解析并分组数据 #

首先假设你已经把CSV解析成了JavaScript对象数组（可以用d3.csv()或者其他CSV解析工具），然后用d3.nest按country和state分层分组：

const csvData = [
  { world: "World", country: "US", state: "CA" },
  { world: "World", country: "US", state: "NJ" },
  { world: "World", country: "INDIA", state: "OR" },
  { world: "World", country: "INDIA", state: "AP" }
];

// 用d3.nest分组
const nestedData = d3.nest()
  .key(d => d.country) // 第一层按country分组
  .key(d => d.state)   // 第二层按state分组
  .entries(csvData);

此时nestedData的结构是这样的：

[
  { key: "US", values: [{ key: "CA", values: [...] }, { key: "NJ", values: [...] }] },
  { key: "INDIA", values: [{ key: "OR", values: [...] }, { key: "AP", values: [...] }] }
]

步骤2：将分组结果转换为树形结构 #

接下来只需要把key映射为name，把values映射为children即可。你可以选择简洁的链式写法，或者更易扩展的函数形式：

方法1：简洁的链式map

一行代码就能完成转换，适合当前的两层嵌套场景：

const treeStructure = {
  name: "World",
  children: nestedData.map(countryGroup => ({
    name: countryGroup.key,
    children: countryGroup.values.map(stateGroup => ({ name: stateGroup.key }))
  }))
};

方法2：可扩展的函数形式（适合更深层级）

如果以后需要处理更深的嵌套层级（比如新增city字段），递归函数会更灵活，当前场景下用简单遍历也足够：

function convertNestToTree(nested) {
  const root = { name: "World", children: [] };
  
  nested.forEach(country => {
    const countryNode = { name: country.key, children: [] };
    country.values.forEach(state => {
      countryNode.children.push({ name: state.key });
    });
    root.children.push(countryNode);
  });
  
  return root;
}

const treeStructure = convertNestToTree(nestedData);

最终结果 #

运行后得到的treeStructure完全符合你的需求：

{ 
  "name": "World", 
  "children": [ 
    { "name": "US", "children": [ { "name": "CA" }, { "name": "NJ" } ] }, 
    { "name": "INDIA", "children": [ { "name": "OR" }, { "name": "AP" } ] } 
  ] 
}

核心思路 #

d3.nest的核心作用是分组扁平数据，它输出的key-values结构是为了方便统计和处理分组数据，而非直接用于树形可视化。所以我们只需要手动建立key→name、values→children的映射关系，就能快速转换为符合需求的树形结构。

内容的提问来源于stack exchange，提问作者santoku