javascript - 在 D3 中使用单个数据点格式化大美元值

Question

我有一个散点图，它根据用户输入过滤掉某些数据点。我使用 d3.format 按以下方式将 X 轴值返回为美元:

var costFormatter = d3.format('$' + 's');

xAxis = d3.svg.axis().orient('bottom').tickFormat(function(d) {
  if (d === 0) { return 0; }
  else if (d < 0) { return ''; }
  else { return costFormatter(d);  } // returns $1.5M, 800k, etc.
});

当我有大量点时，此方法非常有效，但当我深入到散点图上的单个点时，我有 10 个刻度返回诸如 $8.3498668M 之类的数字。我希望该数字显示为 $8.35M。

注意:由于域和范围值是动态的，因此我无法使用显式设置值 tickValues()

Answer 1

不幸的是，你不能在 d3.format 中混合类型 g 和类型 s，所以你必须这样做......

function f(x){
  return d3.format('$,s')(x.toPrecision(3));
}  

我做了一些实验，s 类型似乎包含 g 行为，所以它更容易......

d3.format('$,.3s')  

将给出与上述函数相同的结果。