javascript 如何从 d3js 图中的 y 轴刻度中删除小数点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13599118/
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
How to remove decimal point from my y axis scale in d3js graph
提问by iJade
Here is link to my d3js graph http://enjalot.com/inlet/4159384/Problem is that the y axis which shows Year is having values such as 2008.5 and 2009.0 for json data
这是我的 d3js 图的链接http://enjalot.com/inlet/4159384/问题是显示 Year 的 y 轴具有 json 数据的值，例如 2008.5 和 2009.0
[{count:200,year:2008},
{count:240,year:2010},
{count:290,year:2009}];
I want to display Years without any decimal points.How to do it. Here is my d3js code below
我想显示没有任何小数点的年份。怎么做。下面是我的 d3js 代码
var w = 300,
h = 300,
padding = 31,
p = 10;
var data = [{count:200,year:2008},
{count:240,year:2010},
{count:290,year:2009}];
var bar_height = d3.scale.linear()
.domain(d3.extent(data, function(d) { return d.count; }) ) // min max of count
.range([p,h-p]); // min max of area to plot in
var bar_xpos = d3.scale.linear()
.domain(d3.extent(data, function(d) { return d.year; }) ) // min max of year
.range([p,w-p]); // min max of area to plot in
var xAxis = d3.svg.axis()
.scale(bar_xpos)
.orient("bottom")
.ticks(5); //Set rough # of ticks
var yAxis = d3.svg.axis()
.scale(bar_height)
.orient("left")
.ticks(5);
var svg = d3.select("svg")
.attr("width", w)
.attr("height", h);
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
回答by rosshamish
Check out the docs on d3 value formatting.
查看有关d3 值格式的文档。
If you use d3.format()to format your axis, your axis values will look a lot nicer.
如果您使用d3.format()格式化您的轴，您的轴值会看起来更好。
var formatxAxis = d3.format('.0f');
var xAxis = d3.svg.axis()
.scale(bar_xpos)
.orient("bottom")
.tickFormat(formatxAxis)
.ticks(5);
.0fmeans:
I want a precision of 0places after the decimal, and I want values to be fixed, i.e. not rounded but truncated.
.0f意味着：
我想要小数点后0位的精度，并且我想要固定值，即不四舍五入但截断。
You'll notice, however, that since you are fixing the precision to 0 places after the decimal, you will have 2009.5 and 2009.0 both being formatted to 2009. This will mean that two axis ticks could have the same value. This error will go away once you have enough data points over more years.
但是，您会注意到，由于您将精度固定为小数点后的 0 位，因此 2009.5 和 2009.0 都会被格式化为 2009。这意味着两个轴刻度可能具有相同的值。一旦您在多年内拥有足够的数据点，此错误就会消失。
