javascript - 如何从 d3js 图中的 y 轴刻度中删除小数点

Question

这是我的 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}];

我想显示没有任何小数点的年份。如何做。 下面是我的 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);

Answer 1

查看 d3 value formatting 上的文档.

如果您使用 d3.format() 来格式化您的坐标轴，您的坐标轴值看起来会好很多。

var formatxAxis = d3.format('.0f');

var xAxis = d3.svg.axis()
            .scale(bar_xpos)
            .orient("bottom")
            .tickFormat(formatxAxis)
            .ticks(5); 

.0f 表示:
我想要小数点后 0 位的精度，并且我希望值是固定的，即不四舍五入而是 chop 。

但是，您会注意到，由于您将精度固定为小数点后 0 位，因此 2009.5 和 2009.0 都被格式化为 2009。这意味着两个轴刻度可能具有相同的值。一旦您拥有足够多年的数据点，此错误就会消失。