如何用JavaScript从URL生成嵌套JSON用于D3.js图表

我来帮你搞定这个嵌套JSON的转换问题！先梳理下你现有代码里的几个关键问题，再给出修正后的方案：

原代码的核心问题 #

1. 变量作用域错误：你把measuresdata定义在forEach循环内部，导致每次循环都会重置这个数组，而且外部的console.log根本拿不到它的值
2. children结构错误：你期望的children是数组，但原代码里用了children:{ent, plir}这种对象语法，最终会生成键值对而非数组
3. 未按measure_code分组：如果同一个measure_code对应多个子项，原代码会重复创建外层的measure对象，而不是把多个submeasure归到同一个measure的children里

修正后的代码 #

d3.json('http://88.99.13.199:3000/measures', function(err, mydata) {
  // 初始化最终结果数组，放在循环外部避免每次重置
  const measuresdata = [];
  // 用对象来按measure_code分组，方便归集同一个measure下的submeasure
  const measureGroups = {};

  mydata.forEach(val => {
    // 如果当前measure_code还没被创建，先初始化基础结构
    if (!measureGroups[val.measure_code]) {
      measureGroups[val.measure_code] = {
        name: val.measure_code,
        children: []
      };
    }
    // 构建单个submeasure的嵌套结构，children是数组（符合你的期望）
    const submeasureItem = {
      name: val.submeasure_code,
      children: [
        { name: "entaxeis", size: val.entaxeis },
        { name: "pliromes", size: val.pliromes }
      ]
    };
    // 把submeasure加到对应measure的children数组里
    measureGroups[val.measure_code].children.push(submeasureItem);
  });

  // 把分组对象转成数组，得到最终的嵌套结构
  for (const measureKey in measureGroups) {
    measuresdata.push(measureGroups[measureKey]);
  }

  console.log(measuresdata); // 现在就能得到你想要的结构啦！
});

代码逻辑说明 #

1. 分组归集：先用measureGroups对象把相同measure_code的数据归到一起，避免重复创建外层的measure节点
2. 构建子项结构：每个submeasure的children直接是包含entaxeis和pliromes的数组，完全匹配你期望的格式
3. 转成最终数组：最后把分组对象转换成数组，就是D3需要的嵌套JSON结构

最终输出示例 #

运行后你会得到如下结构的JSON（和你期望的一致）：

[
  {
    "name": "Μ01",
    "children": [
      {
        "name": "1.1",
        "children": [
          {"name": "entaxeis", "size": 456123},
          {"name": "pliromes", "size": 3812}
        ]
      }
    ]
  },
  {
    "name": "M03",
    "children": [
      {
        "name": "3.1",
        "children": [
          {"name": "entaxeis", "size": 456123},
          {"name": "pliromes", "size": 3812}
        ]
      }
    ]
  }
]

额外提示 #

如果你的D3图表需要一个根节点（比如树形图通常要求外层有一个总节点），可以给最终结果再套一层：

const rootData = { name: "所有指标", children: measuresdata };

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