Question

我目前正在使用：

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

然后

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

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

此轴上的值最多可达3,100,000,000。

我不喜欢这些价值落在彼此之上的事实，而不太重要的是我希望标签有Giga，Mega，Kilo。

我很感激任何建议。

Answer 1

M. Bostock可以从this comment得出一个好方法：

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); } );

正如您所注意到的那样，我们可以在屏幕上定义您想要的最大位数 - 在这种情况下为5 - 并处理该情况，因为我们认为这种情况最适合特定情况（每种情况都不同）。

刻度格式产生重叠标签

1 个答案: