CODEWITHSUNDEEP
javascriptd3.js
ditto
ditto

Reputation: 6307

d3 line chart cutting off at the top

Is there anyway to prevent the top of this line from cutting off if the value gets too high?

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

    });

Upvotes: 3

Views: 1753

Answers (2)

nick
nick

Reputation: 71

Yes, I updated the fiddle. https://jsfiddle.net/o7sj0jg5/3/

Just add 

.nice()

to the definition of your y-scale. https://github.com/mbostock/d3/wiki/Quantitative-Scales

Upvotes: 1

reptilicus
reptilicus

Reputation: 10417

The quick and easy way would be to bump the domain on the y axis by a small factor, like: 

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

Upvotes: 3

Related Questions