从D3 v3升级后无报错但SVG路径不可见问题排查

核心问题排查：空白<path>的原因 #

空白路径通常是因为路径生成器未接收到正确数据，或是enter/update流程未正确关联数据与DOM元素。你怀疑的.merge()确实是D3 v4+版本的关键变化——v3中enter().append()后会自动合并到update选择集，但v4+必须显式调用.merge()，才能让后续属性更新同时作用于新创建和已存在的元素。

修复D3代码的关键步骤 #

假设你的代码结构类似以下示例，需补充.merge()并确保数据绑定逻辑正确：

// 三分环形图数据与基础配置
const data = [30, 40, 30];
const pie = d3.pie()(data);
const arc = d3.arc()
  .innerRadius(60)
  .outerRadius(100);

// 数据绑定
const slices = d3.select("svg").selectAll(".slice")
  .data(pie);

// 处理新元素+合并更新
slices.enter()
  .append("path")
  .attr("class", "slice")
  .merge(slices) // 显式合并enter与update选择集
  .attr("d", arc) // 调用弧生成器生成路径
  .style("fill", (d, i) => d3.schemeCategory10[i]);

// 清理多余元素（若数据有动态变化）
slices.exit().remove();

若仍出现空白路径，额外检查两点：

• 打印console.log(pie)确认数据包含startAngle和endAngle属性，若原始数据全为0，角度会重合导致路径为空；
• 确认d3.arc()的内外半径设置合理，若内外半径相等会变成环形边缘，也可能显示异常。

非D3实现三分环形图的方案 #

方案1：原生SVG路径 #

手动计算三个扇形路径（以中心(100,100)、内半径60、外半径100为例，每个扇形占120°）：

<svg width="200" height="200">
  <!-- 第一个扇形：0-120° -->
  <path d="M100,100 L160,100 A60,60 0 0,1 70,151.96 Z M100,100 L130,100 A30,30 0 0,1 85,75.98 Z" 
        fill="#1f77b4" />
  <!-- 第二个扇形：120-240° -->
  <path d="M100,100 L70,151.96 A60,60 0 0,1 70,48.04 Z M100,100 L85,75.98 A30,30 0 0,1 85,124.02 Z" 
        fill="#ff7f0e" />
  <!-- 第三个扇形：240-360° -->
  <path d="M100,100 L70,48.04 A60,60 0 0,1 160,100 Z M100,100 L85,124.02 A30,30 0 0,1 130,100 Z" 
        fill="#2ca02c" />
</svg>

方案2：CSS锥形渐变实现 #

无需JS，用conic-gradient配合伪元素裁剪出环形：

<div class="donut-chart"></div>

<style>
.donut-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(#1f77b4 0 33.3%, #ff7f0e 33.3% 66.6%, #2ca02c 66.6% 100%);
  position: relative;
}
.donut-chart::after {
  content: "";
  position: absolute;
  top: 20%;
  left: 20%;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: white;
}
</style>

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