2016-09-19 8 views
2

私はx軸として時間スケールを使用してD3バージョン4で棒グラフを作成しています。軸そのものはうまく描画されますが、棒はオフです。グラフの最後のバーは軸の範囲のの外にと表示されます。適切な範囲および/またはxの値を指定するにはどうすればよいですか?d3時間スケール - グラフの最後のバーがグラフの外側に表示されます

Working example

コードスニペット:

const xScale = (width, dates) => 
    scaleTime() 
    .domain([new Date(dates[0]), new Date(last(dates))]) 
    .range([0, width]) 

svg.select('g') 
    .selectAll(`.${styles['bar']}`) 
    .data(series) 
    .enter() 
    .append('rect') 
    .attr('class', styles['bar']) 
    .attr('x', (d) => x(d.date)) 
    .attr('width', Math.floor(width/series.length)) 
    .attr('y', (d) => { 
    const scaled = y(d.count) 
     return height - scaled > 0 && height - scaled < 2 
     ? height - 2 
     : scaled 
    }) 
    .attr('height', (d) => { 
    const scaled = height - y(d.count) 
    return scaled > 0 && scaled < 2 
     ? 2 
     : scaled 
    }) 

Misaligned Bar

+0

最終バーの左端が範囲内に表示されているようです。私はあなたの範囲を幅より少し広くすることでこれを修正できると思います。 (幅と+ 1バーの予想幅) – ksav

+0

残念ながら、それは物事を適切に整列させるものではありません。この問題を説明するためにJSFiddleを追加しました。 –

答えて

関連する問題