将 y 轴上的数字转换为千 d3.js 的 K 字符串答案

【问题标题】：converting numbers on y axis to string with K for thousand d3.js将 y 轴上的数字转换为千 d3.js 的 K 字符串
【发布时间】：2013-03-07 18:17:33
【问题描述】：

我正在使用 d3.js 图表来绘制 y 轴和 x 轴。它工作正常，但是你可以说 y 轴上的值范围是 0 到 10000，我希望如果数字大于千，它将与 K 一起出现。
如果数字是 1000，它将显示 1K，对于 15000，它将在 y 轴刻度上显示 15K。

如何做到这一点？我无法为字符串值处理 y.domain 和范围函数。

var y = d3.scale.linear().range([ height, 0 ]);
y.domain([
  0,
  d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.count; }); })
]);

【问题讨论】：

在jsfiddle.net发布一个你迄今为止尝试过的例子

标签： javascript d3.js

【解决方案1】：

您正在轴对象上寻找tickFormat。

var svgContainer = d3.select("body").append("svg")
    .attr("width", 800)
    .attr("height", 100);

//Create the Scale we will use for the Axis
var axisScale = d3.scale.linear()
    .domain([0, 2000])
    .range([0, 600]);

//Create the Axis
var xAxis = d3.svg.axis()
    .scale(axisScale)
    .tickFormat(function (d) {
      if ((d / 1000) >= 1) {
        d = d / 1000 + "K";
      }
      return d;
    });

var xAxisGroup = svgContainer.append("g")
    .call(xAxis);

在这里查看：http://jsfiddle.net/3CmV6/2/

这将为您提供您想要的，但我建议您查看 robermorales 的建议以使用 d3.format('s') 。

【讨论】：

【解决方案2】：

如果您想编辑刻度上的标签，可以使用tickFormat 函数。

例如，您的 y 轴函数如下所示：

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(function(tickVal) {
        return tickVal >= 1000 ? tickVal/1000 + "K" : tickVal;
    });

然后你只需要调用它。假设您有一个名为 svg 的变量引用您的 svg 图表：

svg.append("g)
    .call(yAxis);

为了让事情更清楚一点，我基于this tutorial 创建了this jsfiddle，如果值大于或等于 1000，则适用于以上述方式显示轴刻度标签。如果你运行它有几次你会看到如何处理不同的轴值。

【讨论】：

【解决方案3】：

这是我实现的

var yAxis = d3.svg.axis().scale(y).ticks(5).
tickFormat(function (d) {
    var array = ['','k','M','G','T','P'];
    var i=0;
    while (d > 1000)
    {
        i++;
        d = d/1000;
    }

    d = d+' '+array[i];

    return d;}).
orient("left");

它可以工作超过一千...

【讨论】：

我需要改进网络流量图上的 y 轴（类似于 MRTG 图。我使用此解决方案通过覆盖 tickFormat 方法来获取 bps、Kbps、Mbps、Gbps 等，使用"bps","Kbps", Mbps" 等在名为 array 的数组中。这些是网络中速度的标准，而存储有时使用 MBps（兆字节每秒），相差 8 倍。

【解决方案4】：

从API Reference，我们看到d3.formatPrefix

var prefix = d3.formatPrefix(1.21e9);
console.log(prefix.symbol); // "G"
console.log(prefix.scale(1.21e9)); // 1.21

我们可以这样使用它

var yAxis = d3.svg.axis()
    .scale(y)
    .ticks(5)
    .tickFormat(function (d) {
        var prefix = d3.formatPrefix(d);
        return prefix.scale(d) + prefix.symbol;
    })
    .orient("left");

但是，如果这正是您的意思，我们可以使用 d3.format("s") 进行简化

var yAxis = d3.svg.axis()
    .scale(y)
    .ticks(5)
    .tickFormat(d3.format("s"))
    .orient("left");

【讨论】：

【解决方案5】：

简洁的方法：

var myTickFormat = function (d) {//Logic to reduce big numbers
  var limits = [1000000000000000, 1000000000000, 1000000000, 1000000, 1000];
  var shorteners = ['Q','T','B','M','K'];
  for(var i in limits) {
    if(d > limits[i]) {
      return (d/limits[i]).toFixed() + shorteners[i];
    }
  }
  return d;
};

spenderRowChart
    .xAxis().ticks(3)
    .tickFormat(myTickFormat);

这将返回 1K 用于 1000，1M 用于 1,000,000，等等。
注意：超过千万亿，您可能想要通过 Number.MAX_SAFE_INTEGER。

【讨论】：

【解决方案6】：

试试这个

      axis: {
                y: {
                    tick: {
                        format: d3.format("$.2s")
                    }
                }
            }

【讨论】：

最佳答案