我有一组跨越13个月的日期和值。第一次日期是2011年12月31日,最后一次是2013年2月14日。

javascript - 如何强制d3的日期轴为未满的第一个月和最后几个月绘制刻度线[FIDDLE UPDATED]?-LMLPHP

我需要强制d3将第一个刻度绘制为12月而不是1月,最好将最后一个刻度绘制为Mach。
我应该如何处理?我尝试通过设置最小日期值的最小值来调整d3范围:

var domainXMin = d3.min(dataset, function(d){ return d.x; });
var domainXMax = d3.max(dataset, function(d){ return d.x; });

var domainYMin = d3.min(dataset, function(d){ return d.y; });
var domainYMax = d3.max(dataset, function(d){ return d.y; });


var xScale = d3.time.scale()
    .domain([d3.time.month.floor(domainXMin), domainXMax])
    .range([0, width]);


但这似乎并不总是有效。有没有办法?

Fiddle

最佳答案

使用tickFormat

var monthFormat = d3.time.format("%B");
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .ticks(6)
    .innerTickSize(-height)
    .outerTickSize(0)
    .tickPadding(10)
    .tickFormat(monthFormat);




您可能必须求助于自己设置刻度线:

.tickValues([
    new Date(2011, 11, 1),new Date(2012, 1, 1),
    new Date(2012, 3, 1),new Date(2012, 5, 1),
    new Date(2012, 7, 1),new Date(2012, 9, 1),
    new Date(2012, 11, 1),new Date(2013, 1, 1)
    ]);


更新了fiddle

09-10 10:27
查看更多