防止使用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

希望这可以帮助。