d3 - 在水平堆叠条形图中更新宽度和X以实现平滑过渡

以下是使用D3库在水平堆叠条形图中更新宽度和X以实现平滑过渡的代码示例：

// 创建数据集
var dataset = [
  { category: "A", values: [10, 20, 30] },
  { category: "B", values: [15, 25, 35] },
  { category: "C", values: [12, 22, 32] }
];

// 定义画布的宽度和高度
var width = 500;
var height = 300;

// 创建SVG元素
var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

// 创建比例尺
var xScale = d3.scaleBand()
  .domain(dataset.map(function(d) { return d.category; }))
  .range([0, width])
  .paddingInner(0.1);

var yScale = d3.scaleLinear()
  .domain([0, d3.max(dataset, function(d) { return d3.sum(d.values); })])
  .range([height, 0]);

// 创建颜色比例尺
var colorScale = d3.scaleOrdinal(d3.schemeCategory10);

// 创建堆叠布局
var stack = d3.stack()
  .keys(d3.range(dataset[0].values.length));

// 生成堆叠数据
var stackedData = stack(dataset.map(function(d) {
  return d.values.map(function(value, index) {
    return { category: d.category, value: value, index: index };
  });
}));

// 创建堆叠条形图
var bars = svg.selectAll("g")
  .data(stackedData)
  .enter()
  .append("g")
  .attr("fill", function(d, i) { return colorScale(i); });

// 更新堆叠条形图
bars.selectAll("rect")
  .data(function(d) { return d; })
  .enter()
  .append("rect")
  .attr("x", function(d) { return xScale(d.data.category); })
  .attr("y", function(d) { return yScale(d[1]); })
  .attr("width", xScale.bandwidth())
  .attr("height", function(d) { return yScale(d[0]) - yScale(d[1]); })
  .transition()
  .duration(1000)
  .attr("x", function(d) { return xScale(d.data.category) + xScale.bandwidth() * d.data.index; })
  .attr("width", xScale.bandwidth() / dataset.length);

// 添加坐标轴
var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);

svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

svg.append("g")
  .call(yAxis);

这段代码首先创建了一个水平堆叠条形图的基本框架，然后使用D3的过渡方法将条形图的宽度和X属性从原始值平滑过渡到更新后的值。最后，添加了坐标轴以显示数据的标尺。