,可以通过以下步骤实现:
以下是一个示例代码,展示如何调整d3水平堆叠条形图的条形内的文本:
// 创建SVG容器
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// 数据
var data = [
{ category: "A", value1: 10, value2: 20, value3: 30 },
{ category: "B", value1: 15, value2: 25, value3: 35 },
{ category: "C", value1: 20, value2: 30, value3: 40 }
];
// 堆叠处理
var stack = d3.stack()
.keys(["value1", "value2", "value3"]);
var stackedData = stack(data);
// 创建矩形元素
var rects = svg.selectAll("rect")
.data(stackedData)
.enter()
.append("rect")
.attr("x", function(d) { return xScale(d[0][0]); })
.attr("y", function(d) { return yScale(d.data.category); })
.attr("width", function(d) { return xScale(d[0][1]) - xScale(d[0][0]); })
.attr("height", yScale.bandwidth())
.attr("fill", function(d) { return colorScale(d.key); });
// 创建文本元素
var texts = svg.selectAll("text")
.data(stackedData)
.enter()
.append("text")
.attr("x", function(d) { return xScale(d[0][0]) + (xScale(d[0][1]) - xScale(d[0][0])) / 2; })
.attr("y", function(d) { return yScale(d.data.category) + yScale.bandwidth() / 2; })
.attr("text-anchor", "middle")
.attr("dominant-baseline", "middle")
.text(function(d) { return d[0][1] - d[0][0]; })
.attr("fill", "white");
// 添加过渡效果
rects.transition()
.duration(1000)
.attr("width", function(d) { return xScale(d[1][1]) - xScale(d[1][0]); });
texts.transition()
.duration(1000)
.attr("x", function(d) { return xScale(d[1][0]) + (xScale(d[1][1]) - xScale(d[1][0])) / 2; })
.text(function(d) { return d[1][1] - d[1][0]; });
这个示例代码中,我们使用了d3.js库来创建一个水平堆叠条形图,并在每个条形内部显示了堆叠的数值。你可以根据实际需求进行修改和优化,例如调整文本的样式、位置和内容。
领取专属 10元无门槛券
手把手带您无忧上云