D3.js中一元+号无法将字符串转数字的问题及解决办法

问题场景 #

导入CSV文件后，使用d3.nest()做分组统计，代码如下：

var data_group = d3.nest()
                .key(function(d) {return +d.year;})
                .key(function(d) {return +d.average_rating;})
                .rollup(function (count) {
                  return count.length;
                })
                .entries(data);

console.log(data_group) 

但控制台输出的year和average_rating分组键仍为字符串，而非预期的数字类型。

解决方案 #

方案1：CSV导入时直接转换字段类型 #

CSV文件导入的所有字段默认都是字符串，最稳妥的方式是在导入阶段就把需要的字段转成数字：

d3.csv("your-file.csv", function(row) {
  return {
    year: +row.year,
    average_rating: +row.average_rating,
    // 保留其他原始字段
    ...row
  };
}).then(function(data) {
  var data_group = d3.nest()
    .key(function(d) { return d.year; })
    .key(function(d) { return d.average_rating; })
    .rollup(function(count) { return count.length; })
    .entries(data);
  console.log(data_group);
});

此时nest分组使用的已经是数字类型的字段，生成的分组键自然也是数字。

方案2：分组后手动转换键的类型 #

如果已经拿到原始数据，也可以在分组完成后遍历结果，把字符串类型的key转成数字：

var data_group = d3.nest()
  .key(function(d) {return +d.year;})
  .key(function(d) {return +d.average_rating;})
  .rollup(function (count) {
    return count.length;
  })
  .entries(data);

// 转换外层year的key类型
data_group.forEach(yearGroup => {
  yearGroup.key = +yearGroup.key;
  // 转换内层average_rating的key类型
  yearGroup.values.forEach(ratingGroup => {
    ratingGroup.key = +ratingGroup.key;
  });
});

console.log(data_group);

为什么一元+号无效？ #

d3.nest()的.key()方法内部会强制把返回的键值转换为字符串——不管你在key函数里返回的是数字、布尔值还是其他类型，nest都会调用.toString()方法将其转为字符串后作为分组键存储。所以你用+d.year把字符串转成数字后，nest立刻又把它转回了字符串，最终输出的key还是字符串类型。

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