如何将嵌套JSON数据导入D3.js表格？

我懂你现在的困扰——你的JSON数据是嵌套结构，普通的键值对表格示例没法直接适配对吧？别慌，咱们可以直接在D3的遍历逻辑里处理嵌套的freq对象，这里给你一个直接适配你数据结构的完整实现：

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>D3.js Nested JSON Table</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        table { border-collapse: collapse; margin: 20px; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>
    <div id="table-container"></div>

    <script>
        // 你的嵌套JSON数据
        const freqData = [
            {State:'2004',freq: {Diabetes:30, Alzheimer:0, Cancer:920, Others:0}},
            {State:'2005',freq:{Diabetes:400, Alzheimer:410, Cancer:0, Others:125}},
            {State:'2006',freq:{Diabetes:400, Alzheimer:437, Cancer:260, Others:2000}},
            {State:'2007',freq:{Diabetes:1061, Alzheimer:319, Cancer:1822, Others:0}}
        ];

        // 提取表头字段：State + freq里的所有疾病名称
        const diseaseKeys = Object.keys(freqData[0].freq);
        const headers = ['State', ...diseaseKeys];

        // 创建表格容器
        const table = d3.select('#table-container')
            .append('table');

        // 生成表头
        const thead = table.append('thead');
        thead.append('tr')
            .selectAll('th')
            .data(headers)
            .enter()
            .append('th')
            .text(d => d);

        // 生成表格内容
        const tbody = table.append('tbody');
        const rows = tbody.selectAll('tr')
            .data(freqData)
            .enter()
            .append('tr');

        // 生成State列
        rows.append('td')
            .text(d => d.State);

        // 生成各疾病数据列
        diseaseKeys.forEach(key => {
            rows.append('td')
                .text(d => d.freq[key]);
        });
    </script>
</body>
</html>

关键步骤解释 #

• 提取表头字段：我们先从第一个数据对象的freq属性里取出所有疾病名称（diseaseKeys），再和State合并成完整的表头数组headers，这样就算后续疾病种类有增减，代码也能自动适配。
• 生成表头：用D3的数据绑定把headers数组映射成<th>元素，快速构建表格的表头行。
• 生成表格内容：
  1. 先遍历freqData生成每一行<tr>；
  2. 先添加<td>显示年份（State）；
  3. 再遍历diseaseKeys，为每个疾病生成对应的<td>，直接从每个数据对象的freq属性里取出对应数值。

这个方案不需要额外扁平化数据，完全贴合你当前的嵌套JSON结构，运行后就能看到规整的表格啦。

内容的提问来源于stack exchange，提问作者Gonçalo Oliveira