如何在Angular8中使用D3.js生成面积图沿X轴对称的镜像图

你之前的方案不生效有两个核心原因：

• rotateX(180deg)属于CSS 3D变换属性，不能通过SVG的attr()方法直接设置，即使改为style()设置CSS属性，也会将X轴、刻度文字等所有元素一起翻转，不符合需求
• 3D变换在不同浏览器对SVG的支持度不一致，还需要额外调整偏移量，维护成本高

推荐两种原生SVG支持的实现方案，代码改动量小，兼容性好：

方案1：新增镜像面积生成器（推荐） #

不需要修改原有绘图逻辑，直接新增对称的面积路径即可：

// 原有绘图代码保持不变，新增以下内容
// 定义镜像面积生成器，沿现有X轴（y = this.height位置）对称
const mirrorArea = d3.area()
  .x((d: any) => x(d.x))
  .y0(this.height) // 基准线和原面积一致，保持X轴为对称轴
  .y1((d: any) => this.height + (this.height - y(d.y))); // 计算对称后的y坐标

// 绘制镜像面积，可自定义填充色、透明度实现叠加效果
this.svg.append("path")
  .datum(this.data)
  .style("fill", "rgba(66, 133, 244, 0.7)")
  .attr("d", mirrorArea);

如果需要将镜像和原有面积在同一区域上下叠加，只需要调整y0为0，y1为y(d.y)即可。

方案2：通过SVG变换实现镜像 #

如果不想修改面积生成逻辑，可以直接复用原有路径数据，通过SVG原生变换实现翻转：

// 原有面积绘制代码添加class标识
this.svg.append("path")
  .attr("class", "original-area")
  .datum(this.data)
  .style("fill", "#D04242")
  .attr("d", area);

// 复制路径做镜像变换
this.svg.append("path")
  .attr("class", "mirror-area")
  .datum(this.data)
  .style("fill", "rgba(208, 66, 66, 0.7)")
  .attr("d", area)
  // 核心变换：沿Y轴翻转后调整位移，保证X轴为对称中心
  .attr("transform", `scaleY(-1) translate(0, -${this.height})`);

如果需要调整镜像的位置，只需要修改translate的第二个参数即可。

内容的提问来源于stack exchange，提问作者Yaditya