Estoy tratando de implementar mi propio hoverRenderer para que el anillo resaltado tenga varios colores. Así que tomé el drawHover en src/rendering/canvas/hover.ts línea 58 y reemplacé
context.arc(data.x, data.y, data.size + PADDING, 0, Math.PI * 2); context.closePath(); context.fill();con
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(); Aunque mi data.highlightColor se configuró en ['#FF2301', '#D53032', '#2F4538'] , el arco que obtuve todavía era de un solo color. Esta publicación tiene una implementación similar y logra el efecto que quiero. ¿Existe alguna restricción impuesta por Sigma que lo impida?
Resulta que se requiere beginPath en cada dibujo. Lo siguiente debería funcionar
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; }