javascript 将 y 轴上的数字转换为带有 K 的字符串，用于千 d3.js
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15493303/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
converting numbers on y axis to string with K for thousand d3.js
提问by Saurabh Sinha
i am using d3.js charts to plot y axis and x axis. It's working fine, but the values in y axis you can say range is say 0 to 10000 and I want if the number is greater than thousand it will come with K.
if the number is 1000 it will show 1K, for 15000 it will show on y axis ticks 15K.
我正在使用 d3.js 图表来绘制 y 轴和 x 轴。它工作正常，但你可以说 y 轴的值范围是 0 到 10000，我想要如果数字大于千，它会带有 K。
如果数字是 1000，它会显示 1K，对于 15000，它会显示在 y 轴上刻度为 15K。
How to do that? I am not able to manupulate y.domainand range functions for the string values.
怎么做？我无法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; }); })
]);
回答by robermorales
From API Reference, we see d3.formatPrefix
从API 参考，我们看到d3.formatPrefix
var prefix = d3.formatPrefix(1.21e9);
console.log(prefix.symbol); // "G"
console.log(prefix.scale(1.21e9)); // 1.21
We can use it this way
我们可以这样使用
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");
However, in case this is exactly what you mean, we can simplify using d3.format("s")
但是，如果这正是您的意思，我们可以简化使用 d3.format("s")
var yAxis = d3.svg.axis()
.scale(y)
.ticks(5)
.tickFormat(d3.format("s"))
.orient("left");
回答by minikomi
You're looking for tickFormaton the axis object.
您正在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);
Check it here: http://jsfiddle.net/3CmV6/2/
在这里检查：http: //jsfiddle.net/3CmV6/2/
This will give you what you want, but I recommend checking the suggestion from robermorales to use d3.format('s').
这会给你你想要的，但我建议检查 robermorales 的建议以使用d3.format('s').
回答by Saurabh Sinha
This is what i implemented
这就是我实施的
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");
it will work for even more than thousand ...
它甚至可以工作超过一千......
回答by Neil Mountford
If you wish to edit the labels on the ticks you can use the tickFormatfunction.
如果您想编辑刻度上的标签，您可以使用tickFormat函数。
For example, your y axis function would look something like this:
例如，您的 y 轴函数如下所示：
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(function(tickVal) {
return tickVal >= 1000 ? tickVal/1000 + "K" : tickVal;
});
Then you just have to call it. Assuming you have a variable called svg that references your svg chart:
然后你只需要调用它。假设您有一个名为 svg 的变量引用您的 svg 图表：
svg.append("g)
.call(yAxis);
To make things a little clearer I've created this jsfiddlebased on this tutorial, adapted to display axis tick labels in the way you describe above if the value is greater than or equal to 1000. If you run it a few times you will see how different axis values are handled.
为了让事情更清楚一点，我根据本教程创建了这个 jsfiddle，如果值大于或等于 1000，它会按照你上面描述的方式显示轴刻度标签。如果你运行几次，你会看到如何处理不同的轴值。
回答by Aditya Gupta
A concise approach:
一个简洁的方法：
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);
This returns 1Kfor 1000, 1M for 1,000,000, and so on.
Note: Beyond quadrillion, you may wanna go through Number.MAX_SAFE_INTEGER.
这回报1K了1000，1M的1,000,000，等等。
注意：超过千万亿，你可能想要通过Number.MAX_SAFE_INTEGER。
回答by charul gupta
Try this
试试这个
axis: {
y: {
tick: {
format: d3.format("$.2s")
}
}
}
