javascript - 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

    });

Answer 1

快速简便的方法是将域在 y 轴上增加一个小因子，例如:

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