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
});