D3バージョン4で2軸を実装する方法

Question

D3を使用して2つのx軸（主軸と副軸）を実装しようとしています。 私はすでにそれらの両方が表示されていますが、私の第2の軸はドメインを適切に表示していません。

がここ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"))); 

ここにありますあなたの更新されたコード：http://codepen.io/anon/pen/bqOPRg?editors=0010

私は6日に1つしか印刷していませんが、まだ "day"軸はひどく混み合っています。テキストサイズを小さくするか、ダニの数を減らすかはあなた次第です。

EDIT：OPはデータ配列に存在する値のみを表示するようにin the commentsを求めているので、ここでは別のCodePenがある：http://codepen.io/anon/pen/qrvdWq?editors=0010