区域图
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
