是否可以在sigma.js中制作多色高光弧？

Question

我正在尝试实现自己的 Hoverrenderer 以使高光具有多种颜色。因此，我在 src/rendering/canvas/hover.ts行58 ，

context.arc(data.x, data.y, data.size + PADDING, 0, Math.PI * 2);
context.closePath();
context.fill();

其

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

        // draw the highlight ring/arc in different colors specified in highlightColor
        for (let index = 0; index < data.highlightColor.length; index++) {
            context.arc(
                data.x,
                data.y,
                fillRadius + 5,
                fillStart,
                fillStart + arcRadian
            );
            context.fillStyle = data.highlightColor[index];
            context.fill();
            fillStart += arcRadian;
        }
        context.closePath();

即使我的 data.highlightcolor 也将 替换为 ['＃ff2301'，'＃ d53032'，'＃2f4538'] ，我得到的弧仍然是单色的。 此帖子具有类似的实现并实现了效果我想。 Sigma是否施加了任何限制？

Answer 1

事实证明，在每个图纸中需要 beginpath 。以下应该有效

        for (let index = 0; index < data.highlightColor.length; index++) {
            context.beginPath();
            context.arc(
                data.x,
                data.y,
                fillRadius + 5,
                fillStart,
                fillStart + arcRadian
            );
            context.fillStyle = data.highlightColor[index];
            context.fill();
            fillStart += arcRadian;
        }