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

Question

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

我需要强制 d3 将第一个刻度绘制为 12 月而不是 1 月，并且最好将最后一个刻度绘制为马赫。我应该如何处理这个问题？我尝试通过降低最小日期值来调整 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

Answer 1

使用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 .