D3.js时间刻度刻度线-仅年份和月份-自定义时间格式

Question

我正在尝试制作一个在x轴上具有时间刻度的可缩放图表。

xScale的默认行为如下：

var x = d3.time.scale()
  .domain([getDate(minDate), getDate(maxDate)])
  .range([0, width]);

和一个xAxis像这样：

var xAxis = d3.svg.axis()
  .scale(x);

几乎是我所追求的。

但我想使用一种自定义的时间格式来显示年份，而不是显示月份名称，而只显示一个刻度线，不显示文本（并可能在这些刻度中添加一个类），同时仍保留默认值缩放轴的行为。

任何帮助将非常感激。

在这里看到JSfiddle

编辑：我想Lars在这里的答案将是一个很好的方法，只要可以将其应用于可缩放图表即可。有什么新想法吗？

Answer 1

这可能有效。显示年份，而不是显示月份的名称，只显示一个刻度线，没有文本：

var timeAxis = d3.svg.axis()
        .scale(timeScale)
        .orient('bottom')
        .ticks(d3.time.years, 1)//should display 1 year intervals
        .tickFormat(d3.time.format('%Y'))//%Y-for year boundaries, such as 2011
        .tickSubdivide(12);//subdivide 12 months in a year

资源：

1. d3.js 主要次要刻度样式（http://bl.ocks.org/vjpgo/4689130）
2. scale.ticks 和 scale.tickFormat() ( https://github.com/mbostock/d3/wiki/Time-Intervals#year )

每两小时显示一个刻度的示例代码，并将其格式化为仅显示小时和上午/下午：

var timeAxis = d3.svg.axis()
        .scale(timeScale)
        .orient('bottom')
        .ticks(d3.time.hours, 2)
        .tickFormat(d3.time.format('%I%p'));

Answer 2

我最终编写了一个小函数来检查缩放级别并相应地设置轴的刻度数。

function calcTickAmount() {
  if (d3.event.scale > 15) {
    return 3
  } else {
    return 10;
  }
}

然后这个函数会在更新函数中被调用

function draw() {
  xAxis.ticks(calcTickAmount());
  axes.call(xAxis);
}

function calcTickAmount() {
  if (d3.event.scale > 15) {
    return 3
  } else {
    return 10;
  }
}

function draw() {
  xAxis.ticks(calcTickAmount());
  axes.call(xAxis);
}

更新了小提琴