在D3中创建汇总统计遇‘grouped is not a function’错误求助

核心问题分析 #

1. 键名重复覆盖：rollup函数里重复定义jobCodeMax键，导致最小值被覆盖，需将第二个键改为jobCodeMin。
2. 数据类型未转换：CSV读取的salaryToMedian是字符串类型，直接用d3.max/min会按字符串规则比较（如"90"会被判定为大于"100"），必须转为数字类型。
3. 数组误用为函数：grouped是经过entries()和map()处理后的数组，不能通过grouped(1000)调用，需通过数组查找方法或转换为键值对象访问指定JobCode的数据。

修正方案一：转换为键值对象（推荐，访问更高效） #

d3.csv("http://127.0.0.1:8887/myData.csv").then(function(data){
    // 转换salaryToMedian为数字类型
    data.forEach(d => {
        d.salaryToMedian = +d.salaryToMedian;
    });

    var grouped = d3.nest()
     .key(function(d) { return d.jobCode; })
     .rollup(function(v) { 
         return {
           jobCodeMax: d3.max(v, function(d) { return d.salaryToMedian; }),
           jobCodeMin: d3.min(v, function(d) { return d.salaryToMedian; }), // 修正键名
           values: v
         }; 
     })
     .entries(data)
     // 转换为以jobCode为键的对象，支持直接访问
     .reduce(function(obj, d) {
       obj[d.key] = {
         jobCodeMax: d.value.jobCodeMax,
         jobCodeMin: d.value.jobCodeMin,
         values: d.value.values
       };
       return obj;
     }, {});

    // 直接访问JobCode为1000的最大值
    console.log(grouped["1000"].jobCodeMax);
});

修正方案二：使用数组find方法查找 #

d3.csv("http://127.0.0.1:8887/myData.csv").then(function(data){
    data.forEach(d => {
        d.salaryToMedian = +d.salaryToMedian;
    });

    var grouped = d3.nest()
     .key(function(d) { return d.jobCode; })
     .rollup(function(v) { 
         return {
           jobCodeMax: d3.max(v, function(d) { return d.salaryToMedian; }),
           jobCodeMin: d3.min(v, function(d) { return d.salaryToMedian; }),
           values: v
         }; 
     })
     .entries(data)
     .map(function(d) {
       return {
         JobCode: d.key,
         jobCodeMax: d.value.jobCodeMax,
         jobCodeMin: d.value.jobCodeMin,
         values: d.value.values
       };
     });

    // 查找指定JobCode的条目
    const targetJob = grouped.find(item => item.JobCode === "1000");
    if (targetJob) {
        console.log(targetJob.jobCodeMax);
    } else {
        console.log("未找到JobCode为1000的数据");
    }
});

注意事项 #

• 若CSV中jobCode是数字类型，比较时需改为item.JobCode === 1000；
• 若存在空值或非数字的salaryToMedian，可添加判断逻辑（如d.salaryToMedian = !isNaN(+d.salaryToMedian) ? +d.salaryToMedian : null）。

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