Wie d3 tickFormat von (Tag, Zeit) haben aber nur Zeit zeigen, wenn der Tag derselbe ist?

Question

Ich habe ein Diagramm D3, wo ich möchte, dass eine Achse Ticks von Tag, Zeit (z. B. "20. Januar, 12.00 Uhr") haben.

Dies ist leicht genug, ich nur:

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

Dies erzeugt

• 20 Jan 00.00
• 20. Januar, 12:00
• 21. Januar, 12: 00 Uhr
• 21. Januar, 12:00 Uhr
• etc ...

Was ich möchte es ist, wenn der Tag der gleiche wie der vorherige Tick ist, zeigen Sie nicht den Tag und zeigen Sie nur die Zeit. (Zeigen im Grunde nur den Teil, der anders ist)

• 20 Jan 00.00
• 12.00
• 21. Januar, 00.00
• 12.00

Ist das möglich? So weit ich sagen kann, dass der Callback, den Sie an tickFormat übergeben, nicht den Wert erhält, der der vorherigen Funktion übergeben wurde. Es gibt Ihnen den aktuellen Wert, den Tick-Index und einige dritte Zahl (nicht sicher, wofür das ist)

Answer 1

In D3 v3 können Sie axis.scale().ticks() verwenden, um auf das vorherige Häkchen zuzugreifen, und verwenden Sie eine benutzerdefinierte tickFormat, um das zu überprüfen und zurückzukehren der entsprechende Text:

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/