layout.stack()
const width = 800, height = 500, padding = {top: 160, left: 130};
const dataSet = [
{
name: "PC",
sales: [
{year: 2005, profit: 3000},
{year: 2001, profit: 2000},
{year: 2002, profit: 1000},
{year: 2003, profit: 5000},
{year: 2006, profit: 4000}
]
}, {
name: "Phone",
sales: [
{year: 2005, profit: 1000},
{year: 2001, profit: 2000},
{year: 2002, profit: 3000},
{year: 2003, profit: 3000},
{year: 2006, profit: 1000}
]
}, {
name: "SoftWare",
sales: [
{year: 2005, profit: 1600},
{year: 2001, profit: 2600},
{year: 2002, profit: 3600},
{year: 2003, profit: 6600},
{year: 2006, profit: 1600}
]
}
];
const stack = d3.layout.stack()
.values(d => d.sales)
.x(d => d.year)
.y(d => d.profit);
const data = stack(dataSet);
const svg = d3.select("body").append("svg")
.attr("width", width + padding.left * 2)
.attr("height", height + padding.top * 2)
.append("g");
const xScale = d3.scale.ordinal()
.domain(data[0].sales.map(d => d.year))
.rangeBands([0, width], .3);
const maxProfit = d3.max(data[data.length - 1].sales, d => d.y0 + d.y);
const yRangeWidth = height - padding.top;
const yScale = d3.scale.linear()
.domain([0, maxProfit])
.range([0, yRangeWidth]);
const color = d3.scale.category20b();
const groups = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.style("fill", (d, i) => color(i));
groups.selectAll("rect")
.data(d => d.sales)
.enter()
.append("rect")
.attr("x", d => xScale(d.year))
.attr("y", d => yRangeWidth - yScale(d.y0 + d.y))
.attr("width", xScale.rangeBand())
.attr("height", d => yScale(d.y))
.attr("transform", `translate(${padding.left},${padding.top})`);
const xAxis = d3.svg.axis().scale(xScale).orient("bottom");
svg.append("g").attr("class", "axis").attr("transform", `translate(${padding.left},${height})`).call(xAxis)
const yAxis = d3.svg.axis().scale(yScale).orient("left");
yScale.range([yRangeWidth, 0]);
svg.append("g").attr("class", "axis").attr("transform", `translate(${padding.left},${padding.top})`).call(yAxis)
const labHeight = 50;
const labRadius = 10;
const labelCircle = groups.append("circle")
.attr("cx", d => (width + padding.left * .9))
.attr("cy", (d,i) => (padding.top + labHeight*i))
.style("fill", (d, i) => color(i))
.attr("r", labRadius);
const labelText = groups.append("text")
.attr("x", d => width + padding.left )
.attr("y", (d,i) => (padding.top + labHeight*i))
.attr("dy", labRadius / 2)
.text(d => d.name);
结果:
image.png
曲线堆叠图
const width = 800, height = 500, padding = {top: 160, left: 130};
const dataSet = [
{
name: "PC",
sales: [
{year: 2005, profit: 3000},
{year: 2001, profit: 2000},
{year: 2002, profit: 1000},
{year: 2003, profit: 5000},
{year: 2006, profit: 4000}
]
}, {
name: "Phone",
sales: [
{year: 2005, profit: 1000},
{year: 2001, profit: 2000},
{year: 2002, profit: 3000},
{year: 2003, profit: 3000},
{year: 2006, profit: 1000}
]
}, {
name: "SoftWare",
sales: [
{year: 2005, profit: 1600},
{year: 2001, profit: 2600},
{year: 2002, profit: 3600},
{year: 2003, profit: 6600},
{year: 2006, profit: 1600}
]
}
];
const stack = d3.layout.stack()
.values(d => d.sales)
.x(d => d.year)
.y(d => d.profit);
const data = stack(dataSet);
const svg = d3.select("body").append("svg")
.attr("width", width + padding.left * 2)
.attr("height", height + padding.top * 2)
.append("g");
const xScale = d3.scale.ordinal()
.domain(data[0].sales.map(d => d.year))
.rangeBands([0, width], .3);
const maxProfit = d3.max(data[data.length - 1].sales, d => d.y0 + d.y);
const yRangeWidth = height - padding.top;
const yScale = d3.scale.linear()
.domain([0, maxProfit])
.range([0, yRangeWidth]);
const color = d3.scale.category20b();
const groups = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.style("fill", (d, i) => color(i));
const areaPath = d3.svg.area()
.x(d => xScale(d.year) + xScale.rangeBand() / 2)
.y0(d => yRangeWidth - yScale(d.y0))
.y1(d => yRangeWidth - yScale(d.y0 + d.y))
.interpolate("basis");
groups.selectAll(".area").data(data).enter().append("path")
.attr("class", "area")
.attr("d", function (d) {
return areaPath(d.sales);
})
.style("fill", (d, i) => color(i))
.attr("transform", `translate(${padding.left},${padding.top})`);
const xAxis = d3.svg.axis().scale(xScale).orient("bottom");
svg.append("g").attr("class", "axis").attr("transform", `translate(${padding.left},${height})`).call(xAxis)
const yAxis = d3.svg.axis().scale(yScale).orient("left");
yScale.range([yRangeWidth, 0]);
svg.append("g").attr("class", "axis").attr("transform", `translate(${padding.left},${padding.top})`).call(yAxis)
const labHeight = 50;
const labRadius = 10;
const labelCircle = groups.append("circle")
.attr("cx", d => (width + padding.left * .9))
.attr("cy", (d, i) => (padding.top + labHeight * i))
.style("fill", (d, i) => color(i))
.attr("r", labRadius);
const labelText = groups.append("text")
.attr("x", d => width + padding.left)
.attr("y", (d, i) => (padding.top + labHeight * i))
.attr("dy", labRadius / 2)
.text(d => d.name);
结果:
image.png