d3折线图在顶部被截断

Question

有没有办法防止该行顶部被削减，如果值过高？ https://jsfiddle.net/o7sj0jg5/

function simpleLine(self, dataset, interpolation) {

    var w = parseInt(d3.select(self).style("width")),
            h = parseInt(d3.select(self).style("height")),

        svg = d3.select(self)
                .append("svg")
                .attr("width", w)
                .attr("height", h),

        x = d3.scale.linear().domain([0, 0]).range([w, 0]),
        y = d3.scale.linear().domain([0, d3.max(dataset)]).range([h, 0]),

        line = d3.svg.line()
                .x(function(d,i) {
                    return i * (w / dataset.length);
                })
                .y(function(d) {
                    return y(d) + -1;
                })
                .interpolate(interpolation);

    svg.append("svg:path").attr("d", line(dataset));

}   


    var nutrientAverages = document.querySelectorAll('.nutrientaverages');
    Array.prototype.forEach.call(nutrientAverages, function(el) {

        var nums = el.getAttribute("data-value").split(',').map(Number);
        simpleLine(el, nums, 'monotone'); // maybe use cardinal-open

    });

- ditto

Answer 1

一种快速简单的方法是通过在y轴上微调域名，例如：

y = d3.scale.linear().domain([0, d3.max(dataset) * 1.2]).range([h, 0])

- reptilicus

Answer 2

是的，我更新了这个示例。https://jsfiddle.net/o7sj0jg5/3/。

只需添加

.nice()

关于y轴的定义，可以参考以下链接： https://github.com/mbostock/d3/wiki/Quantitative-Scales

- nick