如何在D3版本4中實現2 x軸

Question

我試圖用D3實現兩個x軸（主軸和副軸）。 我已經顯示了他們兩個，但我的第二個軸沒有正確顯示域。

這裏有codepen代碼：http://codepen.io/wendelcosta/pen/QpzzgJ

g.append("g") 
.attr("class", "axis axis--x2") 
.attr("transform", "translate(0," + height + ")") 
.call(d3.axisBottom(x2)); 

我需要顯示天爲個月在各大蜱（個月）之間的細微蜱，它應該看起來像下面的圖片。

Click Here for Image Preview

Answer 1

您應該使用時間尺度的x軸。

在「天」軸，則可以使用d3.timeDay設置軸發電機：

call(d3.axisBottom(x2) 
    .ticks(d3.timeDay.every(6)) 
    .tickFormat(d => d3.timeFormat("%d")(d))); 

而在「月」軸，可以增加蜱大小：

call(d3.axisBottom(x) 
    .tickSizeInner(20) 
    .tickFormat(d3.timeFormat("%b %y"))); 

這裏您的更新codepen：http://codepen.io/anon/pen/bqOPRg?editors=0010

我打印每6天只有一個，仍然「日」軸非常擁擠。現在取決於您縮小文本大小還是減少滴答數。

編輯：由於OP問in the comments顯示當前數據陣列中只值，這裏是另一個CodePen：http://codepen.io/anon/pen/qrvdWq?editors=0010