如何强制 d3 的日期轴绘制未满 [FIDDLE 已更新] 的第一个月和最后一个月的刻度？

Question

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

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

如何强制 d3 的日期轴绘制未满 [FIDDLE 已更新] 的第一个月和最后一个月的刻度？

How to force d3's date axis to draw ticks for first and last months that are not full [FIDDLE UPDATED]?

javascript

jquery

date

underscore.js

d3.js