如何获得（日，时间）的d3 tickFormat但只显示时间是否相同？

Question

我有一个D3图表，我希望轴有一天，时间的刻度（例如＆＃34; 1月20日，12：00 am＆＃34;）。

这很容易我只是：

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时
• 1月21日，凌晨12:00
• 下午12时

这可能吗？据我所知，你提供给tickFormat的回调并没有给出前一个函数提供的值。它为您提供当前值，刻度指数和一些第三个数字（不确定它是什么）

Answer 1

在D3 v3中，您可以使用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); 检查并返回相应的文字：

AutoForm

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