如何将扁平化JSON转为D3.js树形图所需的层级结构？

• 不需要逐个指定嵌套属性，也不需要额外的D3内置辅助函数，你可以直接通过自定义children访问器实现通用转换
• d3.hierarchy的第二个入参是children访问器函数，作用是告诉D3从当前节点的什么位置读取子节点列表，你可以在这个函数里实现任意逻辑遍历所有嵌套属性：

// 通用转换示例
const packageJsonHierarchy = d3.hierarchy(packageJson, (currentNode) => {
  // 非对象类型没有子节点，直接返回null
  if (typeof currentNode !== 'object' || currentNode === null) return null
  // 遍历当前节点所有属性，统一转为子节点
  return Object.entries(currentNode).map(([fieldName, fieldValue]) => {
    // 可根据业务需要调整子节点结构，方便后续树形图渲染
    return {
      key: fieldName,
      rawValue: fieldValue
    }
  })
})

• 如果需要过滤不需要展示的属性，在遍历前加filter逻辑即可，比如只保留对象类型的嵌套属性：

return Object.entries(currentNode)
  .filter(([_, value]) => typeof value === 'object' && value !== null)
  .map(([fieldName, fieldValue]) => ({ key: fieldName, rawValue: fieldValue }))

• 这种方案已经可以覆盖绝大多数任意嵌套JSON转树形层级结构的需求，D3没有额外的专用辅助函数，主要是因为不同场景下对「子节点」的定义差异极大，自定义访问器的灵活性已经足够满足需求。

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