D3.js 勾号格式产生重叠标签

我目前正在使用：

var formatValue = d3.format("s");

然后

var axisX = d3.svg.axis()
    .scale( someXscale )
    .tickFormat (function( d ) { return formatValue(d); } );

当我缩放（从最高缩放到最低缩放）时，此代码生成以下内容：

该轴上的值可高达3100000000

我不喜欢这样一个事实，即这些值彼此重叠，不那么重要，我希望标签上有千兆、兆、千

---

如果有任何建议，我将不胜感激。

博斯托克先生可以提出一个好办法：

var formatAbbreviation = d3.format(".2s");

formatAbbreviation(5000000000); // 5.00G
formatAbbreviation(5000000); // 5.00M
formatAbbreviation(5000); // 5.00k

在帖子中，你可以看到他实际定制了行为，将

G

更改为

B

实际上，我在过去创建了自己的自定义实现，也许它会有用。 我举了一个例子：

var format = function(num) {
  var numToStr = num + '';
  var ext = ['', 'K', 'M', 'G']; // Add extensions as needed
  var size = 3; 
  var val = 0;
  var max = 5; // how many digit maximum we want on screen

  var compress = function(str) {
    var len = str.length;
    if (len <= size) {
      return str + ext[val];
    }
    if (val + 1 === ext.length) {
      return str.slice(0, max) + ext[val]; // <= what to do when the max number of digits is reached, change as needed
    }      
    val++;
    return compress(str.slice(0, str.length - size));
  }
  return compress(numToStr);
}

console.log(format(1)) // => 1
console.log(format(12)) // => 12
console.log(format(123)) // => 123
console.log(format(1234)) // => 1K
console.log(format(12345)) // => 12K
console.log(format(123456)) // => 123K
console.log(format(1234567)) // => 1M
console.log(format(12345678)) // => 12M
console.log(format(123456789)) // => 123M
console.log(format(1234567890)) // => 1G
console.log(format(12345678901)) // => 12G
console.log(format(12345678902321312)) // => 12345G

// used more or less like so in d3
var axisX = d3.svg.axis()
    .scale( someXscale )
    .tickFormat (function( d ) { return format(d); } );

var格式=函数（num）{
var numtost=num+''；
var ext=['''K'，'M'，'G']；//根据需要添加扩展
变量大小=3；
var=0；
var max=5；//屏幕上最多需要多少位数
变量压缩=函数（str）{
var len=str.length；
如果（第12节）
console.log（格式（123））/=>123
console.log（格式（1234））/=>1K
console.log（格式（12345））/=>12K
console.log（格式（123456））/=>123K
console.log（格式（1234567））/=>1M
console.log（格式（12345678））/=>12M
console.log（格式（123456789））/=>123M
console.log（格式（1234567890））/=>1G
console.log（格式（12345678901））/=>12G
console.log（格式（12345678902321312））/=>12345G
//在d3中或多或少地这样使用
var axix=d3.svg.axis（）
.scale（someXscale）
.tickFormat（函数（d）{返回格式（d）；}）；

---

正如您所注意到的，我们可以定义您希望在屏幕上显示的最大位数—在本例中为5—并按照我们认为最适合特定情况的方式处理该情况（每种情况都不同）。

您的建议

format=function（num）{

在2次放大操作后，只需用

1K

标记所有刻度。

格式=d3.format（.2s”）；

实际上也一样，但在5-6次放大操作后。我需要格式的准确性，只要在轴上减少刻度，因为它变得过于拥挤。