d3 tickFormatを（day、time）にするにはどうすればいいですか？

Question

私は、軸に刻々と刻みをつけたいと思うD3のグラフを持っています（例えば、「1月20日午前12時」）。

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

これは

• 1月20日、午前12時00分
• 1月20日、12:00
• 1月21日、12を生成します。

  これは私がするのは簡単です： 00am

• 1月21日12:00 pm
• など...

私がしたいことは、その日が前のティックと同じである場合、その日を表示せずに時間を表示することです。

はこれです

• 1月20日、午前12時00分
• 12:00
• 1月21日、午前12時00分
• 12:00（基本的に異なるだけだ部分を表示）可能？あなたがtickFormatに提供するコールバックには、前の関数に与えられた値が与えられていないことがわかります。現在の値、目盛りのインデックス、および何らかの3番目の数字（それが何であるかわからない）

Answer 1

D3 v3ではaxis.scale().ticks()を使用して前のティックにアクセスし、カスタムtickFormatを使用してチェックして戻ります適切なテキスト：upvoted美しい

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/