防止在d3.js中使用域进行剪切

Question

我试图通过增加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

希望这有帮助。