d3.js之如何使 d3 tickFormat of (day, time) 但仅在日期相同时显示时间

我有一个 D3 图表，我希望轴上有日期、时间的刻度(例如“1 月 20 日，上午 12:00”)。

这很容易，我只需:

xAxis.tickFormat(d3.time.format('%b %-d, %-I:%M%p')); 

这产生

1 月 20 日，上午 12:00

1 月 20 日，下午 12:00

1 月 21 日，上午 12:00

1 月 21 日下午 12:00

等等...

我希望它做的是当一天与前一个刻度相同时，不显示日期而只显示时间。 (基本上只显示不同的部分)

1 月 20 日，上午 12:00

12:00pm

1 月 21 日，上午 12:00

12:00pm

这可能吗？据我所知，您提供给 tickFormat 的回调没有给出提供给前一个函数的值。它为您提供当前值、刻度索引和一些第三个数字(不确定那是做什么用的)

请您参考如下方法:

在 D3 v3 中，您可以使用 axis.scale().ticks() 访问上一个刻度，并使用自定义 tickFormat 进行检查并返回适当的文本:

var data = [new Date("2016/01/01"), new Date("2016/01/03")]; 
 
var scale = d3.time.scale() 
  .domain(d3.extent(data)) 
  .range([0, 400]); 
 
var timeFormatWithDate = d3.time.format("%b %-d, %-I:%M%p"); 
var timeFormatWithoutDate = d3.time.format("%-I:%M%p"); 
 
var axis = d3.svg.axis() 
  .scale(scale) 
  .orient("left") 
  .tickFormat(function(d, i) { 
    var ticks = axis.scale().ticks(); 
    if (i > 0 && ticks[i - 1].getDay() === d.getDay()) { 
      return timeFormatWithoutDate(d); 
    } else { 
      return timeFormatWithDate(d); 
    } 
  }); 
 
d3.select("body") 
  .append("svg") 
  .attr("width", 400) 
  .attr("height", 420) 
  .append("g") 
  .attr("transform", "translate(200, 10)") 
  .data(data) 
  .call(axis); 

https://jsfiddle.net/Dogbert/gy5h364g/3/