如何使用D3.js为Apple Rings环形图超出100%的末端边缘添加阴影

提问内容 #

我已实现了Apple Rings相关的JS效果：

我希望当环形数值超过100%时，在圆环的末端显示阴影效果，示例参数如下：
{index: 2, name: 'stand', icon: "\uF106", percentage: 120}
效果参考图如下：

请问需要修改D3.js代码的哪些部分可以实现上述需求？

解答 #

需要修改的D3.js代码核心部分如下：

• 新增阈值判断逻辑
  在原有渲染单个进度环的函数开头加判断，仅当percentage > 100时才执行阴影渲染逻辑，避免非超量的环出现多余样式。
• 预定义SVG高斯模糊滤镜
  在SVG根节点初始化完成后，新增全局模糊滤镜供后续超量环复用：

const defs = svg.append('defs')
defs.append('filter')
  .attr('id', 'ring-end-shadow')
  .attr('x', '-50%').attr('y', '-50%')
  .attr('width', '200%').attr('height', '200%')
  .append('feGaussianBlur')
  .attr('stdDeviation', 3) // 模糊程度可自行调整

• 计算超量时环末端的坐标
  复用你原有代码里的d3.arc生成器，直接获取100%位置的中心点坐标：

// 100%对应的结束角度按你自己的映射规则调整，通常为2*Math.PI
const fullAngle = 2 * Math.PI 
const endPoint = d3.arc()
  .innerRadius(你原有代码的内环半径值)
  .outerRadius(你原有代码的外环半径值)
  .startAngle(fullAngle)
  .endAngle(fullAngle)
  .centroid() // 直接返回[x,y]坐标数组

• 渲染末端阴影
  判断到百分比超过100时，在对应坐标位置绘制和当前环同色的阴影圆，应用预定义的滤镜即可：

if (当前环的percentage > 100) {
  svg.append('circle')
    .attr('cx', endPoint[0])
    .attr('cy', endPoint[1])
    .attr('r', (外环半径 - 内环半径)/2) // 和环的厚度匹配
    .attr('fill', 当前环的主题色)
    .attr('opacity', 0.6) // 透明度可自行调整
    .attr('filter', 'url(#ring-end-shadow)')
}

如果想要效果更自然，还可以把阴影的模糊半径、透明度和超过程度做绑定，比如超20%模糊度设为3，超50%模糊度设为5，会更贴合设计效果。

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