Javascript D3.js时间刻度记号-仅限年和月-自定义时间格式

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

默认行为 使用这样的xScale：

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

还有一个像这样的X轴：

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

这几乎就是我想要的

但我希望有一个显示年份的自定义时间格式，而不是显示月份的名称，只显示一条刻度线，不显示文本（可能会在这些刻度上添加一个类），同时仍保留轴在缩放时的默认行为

任何帮助都将不胜感激

---

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

这可能有用。要显示年份，而不显示月份名称，只显示一条勾号线，不显示文本：

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

资源：

d3.js主次刻度样式（）

scale.ticks和scale.tickFormat（） （）

示例代码，每两小时显示一个勾号，并将其格式设置为仅显示小时和AM/PM：

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

---

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

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

然后在update函数中调用此函数

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

//配置SVG
可变宽度=500，
高度=300，
minDate='1860'，
maxDate='1958'；
//绘制SVG元素
var svgSelect=d3.select（'div.tl'）。append（'svg'）；
//翻译SVG G以适应边距
var translateGroupSelect=svgSelect
.attr（'width'，width）
.attr（'height'，height）
.append（'g'）；
//定义D3XScale
var x=d3.time.scale（）
.domain（[新日期（minDate），新日期（maxDate）]）
.范围（[0，宽度]）；
//定义主d3轴
var xAxis=d3.svg.axis（）
.比例（x）
.蜱（10）；
//画轴
变量轴=translateGroupSelect.append（“g”）
.attr（“类”、“x轴”）
.attr（“转换”、“转换（0、+0+）”）
.呼叫（xAxis）；
//定义缩放
var zoom=d3.behavior.zoom（）
.x（x）
.scaleExtent（[1,32]）
.中心（[宽度/2，高度/2]）
.尺寸（[宽度、高度]）
.打开（“缩放”，绘制）；
//将缩放行为应用于SVG元素
svgSelect.call（缩放）；
//在每次缩放事件中重复绘制内容
函数绘图（）{
ticks（calcTickAmount（））；
axes.call（xAxis）；
}
函数calcTickAmount（）{
如果（d3.event.scale>15）{
返回3
}否则{
返回10；
}
}

---

谢谢你，贾斯汀。但放大时，显示的蜱虫太多。