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

Question

我有一个 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 的回调没有给出提供给前一个函数的值。它为您提供当前值、刻度索引和一些第三个数字(不确定那是做什么用的)

Answer 1

在 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/