2016-02-29 79 views
3

如果数值太高,是否有阻止切断线的顶端?d3折线图顶部切断

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 

    }); 

回答

2

的快速简便的方法是通过一个小的因素碰到y轴上的域名,如:

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