D3 V4で軸上の始点/終点が分かりやすいように、軸を「スマート」と「フレキシブル」にする方法は？

Question

私は以下を持っていますLine Graph (CodePen)あなたが見ることができるように、Y軸はそれほどスマートではありません。 0から始まり、2200の近くのどこかから始める必要があります。

私の推測では、これはスケールをどうするだろうということでした。

// set the ranges 
var x = d3.scalePoint().range([0, width]); 
var y = d3.scaleLinear().range([height, 0]); 

しかし、私は、これは「スマート」と「柔軟」な方法とできませんでしたが動作するように取得するためにすべての種類を試してみました。

どのように軸をスマートにすることができますか？だから明日、私は150で始まる別のデータセットをチャートに送りますが、コードは関連する軸値を描画するのに十分スマートです。

Answer 1

あなたは0から始まるY軸をしたくない場合は、あなたが行ったように、あなたは、ゼロにドメインで低い値を設定しないでください。

y.domain([0, d3.max(result, function(d) { 
    return d.consumption; 
})]); 

あなたはY軸が起動する場合次の最小値に、あなたが使用する必要があります。

y.domain([d3.min(result, function(d) { 
    return d.consumption; })*0.975, 
d3.max(result, function(d) { 
    return d.consumption; })*1.025 
]); 

をここでは、0.975と1.025である数字がちょうど軸がそれぞれ、最小値と最大値を下回ると、後少し行く作るために値。それらを変更したり削除したりすることができます。ここで

は、あなたの更新CodePenです：http://codepen.io/anon/pen/EgOBvO?editors=0010

PS：棒グラフで、それは非常に常にY軸用のゼロベースラインを使用することを推奨している間、Y軸用の非ゼロベースラインを使用して問題はありません時系列で表示する（折れ線グラフ）。