随时间变化的堆叠条形图

// 假设有一个数据数组data，每个元素包含时间和多个分类的值
const data = [
  { date: '2021-01', categoryA: 10, categoryB: 20, categoryC: 30 },
  { date: '2021-02', categoryA: 15, categoryB: 25, categoryC: 35 },
  // 更多数据...
];

// 设置SVG容器
const svg = d3.select('svg');
const margin = { top: 20, right: 30, bottom: 40, left: 40 };
const width = +svg.attr('width') - margin.left - margin.right;
const height = +svg.attr('height') - margin.top - margin.bottom;

// 创建比例尺
const x = d3.scaleBand().rangeRound([0, width]).padding(0.1);
const y = d3.scaleLinear().rangeRound([height, 0]);

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

// 创建组元素
const g = svg.append('g')
  .attr('transform', `translate(${margin.left},${margin.top})`);

// 更新函数
function update(data) {
  // 设置X轴比例尺的域
  x.domain(data.map(d => d.date));
  // 设置Y轴比例尺的域
  y.domain([0, d3.max(data, d => d3.sum(d3.values(d)))]);

  // 绘制条形
  g.selectAll('.bar')
    .data(data)
    .enter().append('g')
    .attr('class', 'bar')
    .attr('transform', d => `translate(${x(d.date)},0)`)
    .selectAll('rect')
    .data(d => d3.entries(d).slice(1)) // 排除日期字段
    .enter().append('rect')
    .attr('width', x.bandwidth())
    .attr('y', d => y(d.value))
    .attr('height', d => height - y(d.value))
    .attr('fill', d => color(d.key));

  // 添加X轴
  g.append('g')
    .attr('transform', `translate(0,${height})`)
    .call(d3.axisBottom(x));

  // 添加Y轴
  g.append('g')
    .call(d3.axisLeft(y));
}

// 调用更新函数
update(data);