D3 JS折れ線グラフは0から始まる

Question

D3 JS V4を使用して折れ線グラフを作成しています。 fiddleを参照してください。

var line = g.append("path") 
    .data([lineData]) 
    .attr("class", "line") 
    .attr("d", valueLine) 
    .style("fill", "none") 
    .style("stroke-width", 2) 
    .style("stroke", "#000"); 

パスはx軸の0から始まります。データによると、最初のx値から開始する必要があります。最初のx値からパスを開始するにはどうすればよいですか？

Answer 1

関連する帯域幅を持つ帯域幅スケールは使用しないでください。たとえば、棒グラフにバンドスケールを使用します。

1つの代替ではなく、ポイントのスケールを使用している：ここでは

var x = d3.scalePoint() 
.rangeRound([0, width]) 
    .padding(0.5); 

は、更新フィドルです：https://jsfiddle.net/gzf7o6sh/