javascript - 在 d3 时间轴上显示每隔一个刻度标签？

Question

我有一个 x 轴使用自定义时间格式的 d3 图表:

var x = d3.time.scale.utc()
        .domain([start, end])
        .range([0, width]);

var customTimeFormat = d3.time.format.utc.multi([
    ["%b %d", function(d) { return d.getUTCDate() != 1; }],
    ["%b", function(d) { return d.getUTCMonth(); }],
    ["%Y", function() { return true; }]
]);

var xAxisTop = d3.svg.axis()
                .scale(x)
                .orient("top")
                .tickFormat(customTimeFormat)
                .innerTickSize(-height)
                .outerTickSize(0)
                .ticks(d3.time.month.utc, 1);

我希望能够做的是每个月都有一个勾号，但每三个月只有一个标签。然而，我似乎能做的就是 (a) 每个月都有一个勾号和标签，或者 (b) 每三个月有一个勾号和标签。

如何指定每月绘制刻度，但每三个月只显示一次标签？

Answer 1

我认为 tickformats 在这里对保持清洁非常有帮助，至少对我有用。

代码未经测试，但我只想提请注意我们如何操作 tickformat。

var xAxisTop = d3.svg.axis()
                .scale(x)
                .orient("top")
                .tickFormat((interval,i) => {
                  return i%3 !== 0 ? " ": interval;
                 })
                .innerTickSize(-height)
                .outerTickSize(0)
                .ticks(d3.time.month.utc, 1);