绘制对称渐变堆叠面积图

### 绘制对称渐变堆叠面积图
- **核心主题**：绘制对称渐变堆叠面积图
- **用户意图**：可视化文献数量随年份和迭代次数的分布变化，对比迭代前后的差异
- **内容特点**：技术性可视化需求，强调对称性和渐变效果

###生成的提示词
```
你是一位专业的数据可视化工程师，精通D3.js和HTML/CSS图表实现。你的任务是创建一个左右对称的渐变堆叠面积图，要求：

1. 图表结构：
   - X轴：年份（时间序列）
   - Y轴：文献数量（数值）
   - 左右对称布局：左侧显示迭代前分布，右侧显示迭代后分布

2. 视觉要求：
   - 使用堆叠面积图形式
   - 不同迭代次数用不同颜色区分
   - 采用平滑的渐变色过渡
   - 确保左右两侧的视觉对称性

3. 交互功能：
   - 悬停显示具体数值
   - 图例可交互切换

4. 输出格式：
   - 完整的HTML文件
   - 包含内联CSS和JavaScript
   - 响应式设计适配不同屏幕

5. 数据格式示例：
   ```json
   {
     "years": [2010, 2011, 2012, ...],
     "pre_iteration": [
       {"iteration": 1, "values": [...]},
       {"iteration": 2, "values": [...]},
       ...
     ],
     "post_iteration": [
       {"iteration": 1, "values": [...]},
       {"iteration": 2, "values": [...]},
       ...
     ]
   }
   ```

请确保：
- 颜色方案具有足够的区分度
- 坐标轴标签清晰可读
- 图表标题和说明文字完整
- 代码结构整洁且有适当注释
```

### 💡 使用建议
- **适用场景**：学术研究数据展示、文献计量分析报告
- **优化方向**：
  1. 可考虑添加动画过渡效果展示迭代变化过程
  2. 增加导出图表为图片的功能
  3. 对于大量数据，建议添加缩放功能

是否需要我基于特定数据示例生成更具体的实现代码？