使用d3的nest()与sum()方法后如何将计算结果保留两位小数

你可以根据自己的业务需求选择以下两种实现方式：

方式1：聚合计算阶段直接格式化结果 #

适合后续不需要再使用原始求和精度做其他计算的场景，修改你的nest聚合代码即可：

var categories = d3.nest()
  .key(function(d){return d.Category})
  .rollup(function(leaves){
    const total = d3.sum(leaves, function(d) {return d3.sum(d3.values(d))});
    // 四舍五入保留两位小数，返回的是数值类型
    return Math.round(total * 100) / 100;
  })
  .entries(data);

如果需要固定显示两位小数（比如整数2会显示为2.00），可以把返回值替换为total.toFixed(2)，需注意toFixed返回的是字符串类型，后续如果要做数值运算需要额外用Number()做类型转换。

方式2：仅在展示阶段格式化 #

适合后续还需要用原始求和结果做其他计算的场景，只需要修改文本渲染部分的代码即可：

var sum=0;

columns = svg.append("g")
  .selectAll("text").data(categories)
  .enter().append("text")
  .attr("x", function(d){
    return x(d.key) + x.rangeBand()/2
  })
  .attr("y", function (d) {
    return y(d.values);
  })
  .attr("dy", "-0.7em")
  .attr('style', 'font-size:11px')
  .text( function (d){
    // 渲染时做四舍五入保留两位小数，toFixed可以自动补全不足两位的小数位
    return d.values.toFixed(2) + '%';
  })
  .style({fill: 'black', "text-anchor": "middle"});

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