防止使用d3.js中的域進行裁剪

Question

我試圖通過像這樣增加yAxis上的域來防止在圖表的最頂部yAxis ：

mainHeight = 640;
yScale = d3.scale.linear()
    .range([mainHeight, 0])
    .domain(d3.extent([0, d3.max(data, function (d) {
        return (d.total)+1000;
    })]));

這個想法是獲取yAxis的最大數據並將其增加1000。

最高的總數是14348因此加上1000就會創建15348

但是，圖表的頂部仍被剪裁，並且我的軸沒有增加以防止剪裁。 即使我將數字增加了9999999999也仍然不會發生。

該行使用以下命令生成：

var totalLine = d3.svg.line()
            .interpolate('monotone')
            .x(function (d) {
                return xScale(d.date);
            })
            .y(function (d) {
                return yScale(d.total);
            });

Answer 1

嘗試在結尾處拋出.nice() 。

yScale = d3.scale.linear()
    .range([mainHeight, 0])
    .domain(d3.extent([0, d3.max(data, function (d) {
        return (d.total)+1000;
    })]))
    .nice();

這將嘗試使軸以漂亮的整數結束。 您可以在此處閱讀更多信息： https : //github.com/d3/d3-3.x-api-reference/blob/master/Quantitative-Scales.md#linear_nice

希望這可以幫助。