在堆叠的D3条形图中添加正确的Y轴缩放,可以按照以下步骤进行操作:
以下是一个示例代码,演示如何将缩放正确的Y轴添加到堆叠的D3条形图:
// 创建SVG容器和图表区域
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var chart = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// 准备数据
var data = [
{ category: "A", values: [10, 20, 30] },
{ category: "B", values: [15, 25, 35] },
{ category: "C", values: [20, 30, 40] }
];
// 定义比例尺
var yScale = d3.scaleLinear()
.domain([0, d3.max(data, function(d) { return d3.sum(d.values); })])
.range([height - margin.bottom, margin.top]);
// 创建堆叠布局
var stack = d3.stack()
.keys(["values"])
.order(d3.stackOrderNone)
.offset(d3.stackOffsetNone);
var stackedData = stack(data);
// 创建颜色比例尺
var colorScale = d3.scaleOrdinal()
.domain(data.map(function(d) { return d.category; }))
.range(["#e41a1c", "#377eb8", "#4daf4a"]);
// 创建堆叠的条形图
var bars = chart.selectAll(".bar")
.data(stackedData)
.enter()
.append("g")
.attr("class", "bar")
.attr("fill", function(d) { return colorScale(d.key); });
bars.selectAll("rect")
.data(function(d) { return d; })
.enter()
.append("rect")
.attr("x", function(d, i) { return xScale(i); })
.attr("y", function(d) { return yScale(d[1]); })
.attr("height", function(d) { return yScale(d[0]) - yScale(d[1]); })
.attr("width", xScale.bandwidth());
// 创建Y轴
var yAxis = d3.axisLeft(yScale);
chart.append("g")
.attr("class", "y-axis")
.call(yAxis);
// 添加动画效果
bars.selectAll("rect")
.transition()
.duration(1000)
.attr("y", function(d) { return yScale(d[1]); })
.attr("height", function(d) { return yScale(d[0]) - yScale(d[1]); });
这是一个基本的示例,用于演示如何将缩放正确的Y轴添加到堆叠的D3条形图。根据实际需求,你可以根据这个示例进行修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云