Question

如果价值变得过高，有没有阻止此线的顶部切断？

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])

Answer 2

是的，我更新了小提琴。 https://jsfiddle.net/o7sj0jg5/3/

添加

Sqlcommand.Cancel()

定义你的y尺度。 https://github.com/mbostock/d3/wiki/Quantitative-Scales

d3折线图顶部切断

2 个答案: