如何使轴“智能”和“灵活”，使轴上的起点/终点在D3 V4中是合理的？

Question

我有下面的线图(CodePen)，正如你所看到的，Y轴不是很聪明.它从0开始，而应该从2200附近的某个地方开始。

我猜这与天平有关：

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

但我试过各种方法让它表现出“聪明”和“灵活”的方式，但我做不到。

我怎样才能使轴心变得更聪明？因此，如果明天我给图表提供一组从150开始的不同的数据集，代码就足够聪明，可以绘制相关的轴值。

Answer 1

如果不希望Y轴从0开始，则不应该像以前那样将域中的较低值设置为零：

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轴的非零基线(线图)是没有问题的。