我正在使用 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; }); })
]);
From API参考 https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md, 我们看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");
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)