如何向 D3 时间线图表添加更多刻度

Question

我有一个堆叠的时间线图，但我无法在图表中包含更多刻度。

我试过这段代码：

var chart = d3.timeline().showAxisTop().stack().background('#C0C0C0').orient('top')
   .relativeTime()
   //.absoluteTime()
   .tickFormat({
      format: function(d) {
         displayDate.setHours(hours++);
         return formatter(displayDate);
      },
      tickTime: d3.time.hours,
      ticks: 20,
      tickInterval: 1,
      tickSize: 30,
   });
chart.margin({
   left: 120,
   right: 0,
   top: 50,
   bottom: 0
});
chart.labelMargin(25);
var svg = d3.select("#timelineAxisTop").append("svg").attr("width", width)
   .datum(testData).call(chart)
   .selectAll("text").attr("class", "timeLineFont");
// $('.tick timeLineFont').attr("x", 75).attr("y", -12);
$('.tick').find('text').attr('x', 85).attr('y', -12);
};

chart image

Answer 1

根据您的问题中显示的图像，您的间隔是每个刻度 1 小时，因此更好地更改：

ticks : 20 到 ticks : (d3.time.hour,1) 通过消除 tickInterval 并且如果您仍然想要更多的刻度然后适当地更改您的刻度可能是 ticks : (d3.time.mintues,45) 例如