Как иметь d3 tickFormat (день, время), но показывать только время, если день тот же?

Question

У меня есть график D3, где я хочу, чтобы ось имела отметки дня, времени (например, «20 января, 12:00»).

Это достаточно легко, я просто:

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

Это производит

• 20 января 12:00 утра
• 20 января, 12:00 вечера
• 21 января, 12: 00am
• 21 января, 12:00 pm
• и т.д.

Что бы я хотел, чтобы сделать это, когда день тот же, что и предыдущий тик, не показывайте день и просто покажите время. (В основном показывают только часть, которая отличается)

• 20 января 12:00 утра
• 12:00 вечера
• 21 янв, 12:00 утра
• 12:00 вечера

Это возможное? Насколько я могу сказать, обратный вызов, который вы предоставляете tickMormat, не получает значения, предоставленного предыдущей функции. Он дает вам текущее значение, индекс тика и некоторое третье число (не уверен, что это за)

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/