Question

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

怎么做..我无法为字符串值制作y.domain和range函数...

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

怎么做才有办法......请帮忙

Answer 1

从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");

Answer 2

您正在轴对象上寻找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')。

Answer 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");

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

Answer 4

如果您想编辑刻度线上的标签，可以使用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 jsfiddle创建了this tutorial，如果值大于或等于1000，则以上面描述的方式显示轴刻度标签。你运行它几次，你会看到如何处理不同的轴值。

Answer 5

一种简洁的方法：

CMAKE_C_OUTPUT_EXTENSION

这将为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，依此类推。
注意：除了四次方，您可能还想Number.MAX_SAFE_INTEGER。

Answer 6

尝试一下

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

将y轴上的数字转换为字符串，其中K为千d3.js

6 个答案: