如何使用D3.js绘制带延伸边缘的半圆形条形图

这个效果在D3.js中完全可以实现，不需要额外依赖第三方库，也不需要处理复杂的跨图形数据绑定问题，以下是两种可直接落地的实现思路：

方案一：单路径拼接实现（推荐） #

不需要把弧段和末端延伸块拆分为两个独立图形，直接把两部分路径合并为同一个path元素，天然绑定单条数据，不会出现拼接错位、样式不同步的问题。
实现逻辑：

• 保留原有半圆弧条形的生成逻辑，先通过d3.svg.arc()生成基础弧段的路径字符串
• 根据每个条形的结束角度、对应环的内外半径，计算弧段末端的内外沿坐标
• 沿弧段终点的径向方向（垂直于弧终点切线方向）向外延伸固定长度，算出延伸段的另外两个顶点坐标
• 在基础弧段的路径字符串后，追加延伸段的路径绘制命令，最后闭合路径即可

这种方式生成的条形是单个图形元素，填充色、鼠标交互等效果和普通弧段完全一致，维护成本最低。

方案二：分组嵌套解决多元素同数据绑定问题 #

如果需要拆分弧段和延伸块为独立元素（比如需要给两部分加不同的动效），不需要重复绑定数据，利用D3的分组元素即可实现：

• 数据遍历阶段，先为每个数据项创建一个独立的g分组元素，将分组与对应的数据项绑定
• 在每个分组内部，按需添加弧段路径、延伸块形状等子元素，子元素会自动继承父分组绑定的数据，无需重复调用.data()接口
• 所有元素的位置、尺寸计算，都直接取父分组绑定的单条数据即可。

现有代码优化提示 #

你当前代码中使用全局变量累加计算半径的写法容易出现计数混乱，可以直接利用绘制回调里传入的索引值i计算对应环带的内外半径，逻辑更清晰。
延伸段长度设置为8-10px即可匹配常规的视觉设计效果，不需要和数据值做关联。
以下是基于你现有D3 v3版本的核心修改代码片段：

// 延伸段固定长度
const extendLength = 9;
function drawArc(d, i) {
  const ratio = d.count / maxVal;
  // 半圆弧起始角为π，结束角根据数据占比计算
  const endAngle = Math.PI * (1 + ratio);
  const innerR = 72 + cgap * (i + baseRad);
  const outerR = 80 + cgap * (i + baseRad);

  // 生成基础半圆弧路径
  const baseArc = d3.svg.arc()
    .startAngle(Math.PI)
    .endAngle(endAngle)
    .innerRadius(innerR)
    .outerRadius(outerR);
  let pathStr = baseArc(d);

  // 计算弧段末端、延伸段顶点坐标
  const arcEndOutX = Math.cos(endAngle) * outerR;
  const arcEndOutY = Math.sin(endAngle) * outerR;
  const arcEndInX = Math.cos(endAngle) * innerR;
  const arcEndInY = Math.sin(endAngle) * innerR;
  const extOutX = arcEndOutX + Math.cos(endAngle) * extendLength;
  const extOutY = arcEndOutY + Math.sin(endAngle) * extendLength;
  const extInX = arcEndInX + Math.cos(endAngle) * extendLength;
  const extInY = arcEndInY + Math.sin(endAngle) * extendLength;

  // 拼接延伸段路径并闭合
  pathStr += `L${extOutX},${extOutY} L${extInX},${extInY} Z`;

  d3.select(this)
    .attr("transform", `translate(${cx1},${cy1})`)
    .attr("d", pathStr)
    .style("fill", color[i % 6]);
}

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