如何修改JSON结构适配D3图表：子节点键名改label，保留父key

我来帮你搞定这个需求！要实现只把第一层子节点的key键名替换成指定的label（同时保留父节点的key），而且不用硬编码节点名称，我们可以写一个通用的数据处理函数来遍历并修改数据结构，完全适配任意层级的修改需求（这次只需要处理第一层）。

核心解决方案：通用键名替换函数 #

这个函数可以灵活指定要修改的节点层级、旧键名和新键名，而且不会修改原始数据（避免副作用）：

function renameChildKeys(data, targetDepth = 1, oldKey = "key", newKey = "label") {
  // 递归遍历节点的内部函数
  function traverse(node, currentDepth) {
    // 当节点到达目标层级，且存在旧键时执行替换
    if (currentDepth === targetDepth && node.hasOwnProperty(oldKey)) {
      node[newKey] = node[oldKey];
      delete node[oldKey];
    }
    // 如果有子节点，继续递归遍历下一层
    if (node.children && node.children.length > 0) {
      node.children.forEach(child => traverse(child, currentDepth + 1));
    }
    return node;
  }
  // 复制原始数据，避免修改原对象
  return traverse({...data}, 0);
}

函数使用说明 #

• targetDepth：指定要修改的节点层级，根节点层级为0，它的直接子节点就是层级1（刚好是你需要处理的层级）
• oldKey：要替换的原始键名（这里是key）
• newKey：替换后的目标键名（这里是label）
• 函数会返回修改后的新数据，原始数据不会被改动

实际使用示例 #

假设你的原始D3数据是这样的：

const originalTreeData = {
  key: "Parent Node",
  children: [
    { key: "Child Node A", children: [{ key: "Grandchild A1" }] },
    { key: "Child Node B" },
    { key: "Child Node C" }
  ]
};

调用函数处理数据：

// 只修改第一层子节点的key为label
const processedData = renameChildKeys(originalTreeData, 1, "key", "label");

处理后的输出结果：

{
  key: "Parent Node",
  children: [
    { label: "Child Node A", children: [{ key: "Grandchild A1" }] },
    { label: "Child Node B" },
    { label: "Child Node C" }
  ]
}

灵活扩展 #

如果之后需要修改其他层级的节点键名，只需要调整targetDepth参数即可：

• 要修改孙节点（第二层子节点），就传targetDepth=2
• 要修改所有层级的key为label，可以去掉层级判断，或者把targetDepth设为一个足够大的数

把处理后的processedData传入你的D3图表布局函数（比如d3.tree()），就能正常渲染符合要求的图表了。

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