Sigma.js如何实现多色高亮圆弧？自定义hoverRenderer仅渲染单色

这不是Sigma.js的框架限制，是Canvas 2D API的路径逻辑使用错误：

• 循环绘制每段圆弧前没有调用beginPath()重置当前路径，所有arc()生成的弧段会被累加到同一条路径中。
• 每次循环执行fill()时，都会用当前fillStyle填充整条已存在的路径，后执行的填充会完全覆盖之前绘制的彩色区域，最终整个图形只会显示highlightColor数组的最后一个颜色。
• 你当前的路径逻辑绘制的是从圆心延伸的实心扇形，并非空心高亮环，如果要实现环形效果还需要调整路径结构。

分色扇形版本（先解决单色问题） #

const [fillStart, fillEnd, fillRadius] = [0, Math.PI * 2, data.size + PADDING];
const arcRadian = (fillEnd - fillStart) / data.highlightColor.length;
let currentRadian = fillStart;

for (let index = 0; index < data.highlightColor.length; index++) {
  // 每次绘制前必须重置路径，避免路径累加
  context.beginPath();
  const nextRadian = currentRadian + arcRadian;
  context.arc(
    data.x,
    data.y,
    fillRadius + 5,
    currentRadian,
    nextRadian
  );
  // 连接圆心形成闭合扇形，保证填充形状正确
  context.lineTo(data.x, data.y);
  context.closePath();
  context.fillStyle = data.highlightColor[index];
  context.fill();
  currentRadian = nextRadian;
}

分色高亮环版本（匹配需求场景） #

如果要实现空心的多色高亮环，需要通过外弧+反向内弧拼接闭合环形段，代码如下：

const [fillStart, fillEnd, outerRadius] = [0, Math.PI * 2, data.size + PADDING + 5];
const innerRadius = data.size + PADDING; // 调整该值可修改环的宽度
const arcRadian = (fillEnd - fillStart) / data.highlightColor.length;
let currentRadian = fillStart;

for (let index = 0; index < data.highlightColor.length; index++) {
  context.beginPath();
  const nextRadian = currentRadian + arcRadian;
  // 绘制外圆弧
  context.arc(
    data.x,
    data.y,
    outerRadius,
    currentRadian,
    nextRadian
  );
  // 反向绘制内圆弧，和外弧拼接成闭合环段
  context.arc(
    data.x,
    data.y,
    innerRadius,
    nextRadian,
    currentRadian,
    true
  );
  context.closePath();
  context.fillStyle = data.highlightColor[index];
  context.fill();
  currentRadian = nextRadian;
}

• Sigma.js的自定义hover渲染器只会拿到canvas上下文和节点数据后执行你传入的绘制逻辑，不会额外篡改路径或填充状态，不存在框架层面的渲染限制。
• 不需要在循环外额外调用context.closePath()，每个分段路径已经在循环内单独闭合，全局路径闭合反而可能导致形状渲染异常。

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