区域图

区域图


code:

 var width = 700, height = 500, padding = {top: 100, left: 100},
        dataSet = [20, 40, 160, 20, 30, 120, 50, 120, 140, 60, 20, 40, 160, 20, 30, 120, 50, 120, 140, 60, 10, 30, 20, 50];
    var svg = d3.select("body").append("svg").attr("width", width + padding.top * 2).attr('height', height + padding.left * 2);
    var xScale = d3.scale.ordinal().domain(d3.range(dataSet.length)).rangeRoundBands([0, width], .2);
    var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(10);
    svg.append("g").attr("class", "axis").attr("transform", "translate(" + padding.left + "," + (height + padding.top) + ")").call(xAxis);
    var yScale = d3.scale.linear().domain([0, d3.max(dataSet) * 1.2]).range([height, 0]);
    var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(10);
    svg.append("g").attr("class", "axis").attr("transform", "translate(" + padding.left + "," + (padding.top) + ")").call(yAxis);
    var areaPath = d3.svg.area().interpolate("basis").x(function (d, i) {
        return i * 20 + padding.left * 1.2;
    }).y0(function (d, i) {
        return height + padding.top;
    }).y1(function (d) {
        return height / 2 - d + padding.top;
    });
    svg.append("g").append("path").attr("class", "axis").attr("d", areaPath(dataSet)).attr("stroke", "black").attr("stroke-width", "3px").attr("fill", "yellow")

结果:

image.png

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容