2016-08-24 17 views
0

日次データがいくつか連続した日数のチャートを作成しています。データ配列内の各オブジェクトには、その日の午前0時のJavaScript Date表現であるdateプロパティがあります。関連するコードを次に示します。d3.timeDay.every(ステップ)が毎月リセットされ、軸ラベルの衝突が発生する

const x = d3.scaleTime() 
    .range([0, width]) 
    .domain(d3.extent(data.map(d => d.date))); 

    const days = data.length; 
    let interval = 1; 
    while (width/(days - 1) * interval < 60) { 
    interval += 1; 
    } 

    const xAxis = d3.axisBottom(x) 
    .tickFormat(d3.timeFormat('%b %d')) 
    .ticks(d3.timeDay.every(interval)); 

問題は、d3.timeDay.every(間隔)が毎月の開始時にリセットされることです。 d3のドキュメントはこれを明確に指摘しているので、バグではありません。

残念ながら、日付が月の境界を越えると、あまりにも近くにあるティックとラベルにつながります。

月の境界に関係なく、間隔の日ごとにX軸(scaleTime)を作成する方法はありますか?

答えて

1

[OK]をクリックして、問題に質問してください。私は答えを見つけた。私は自分のチック値を提供する必要があった。これはうまくいきました:

const xValues = data.filter((d, i) => i % interval === 0).map(d => d.date); 

    const xAxis = d3.axisBottom(x) 
    .tickFormat(d3.timeFormat('%b %d')) 
    // .ticks(d3.timeDay.every(interval)) 
    .tickValues(xValues); 

私は初心者でd3であり、より良い答えを歓迎します。

関連する問題