Estoy creando una dona usando d3.js con AngularJS . Aquí está mi Donut , por defecto necesito tener el mismo color para todos los arcos del gráfico de Donut, que funciona bien. Ahora, al pasar el mouse sobre el arco en particular, necesito cambiar el color de ese arco en particular a azul, lo cual no funciona. ¿Alguien me puede ayudar en esto?

A continuación se muestra la respuesta del plunker de referencia proporcionado. :

 scope.mouseOverPath = function(d) { d3.select(this) .transition() .duration(duration) .style("fill", "blue") .each("start", function(d) { labelRadius = radius + chartConfig.labelPaddingOver; d3.select(this.parentNode).select('.legend') .transition() .attr("transform", function(d) { var c = arc.centroid(d), x = c[0], y = c[1], height = Math.sqrt(x * x + y * y); return "translate(" + (x / height * labelRadius) + ',' + (y / height * labelRadius) + ")"; }); })

... }

 scope.mouseOutPath = function(d) { d3.select(this) .transition() .style('fill', function(d) { return color(d.data.label); }) .each("start", function(d) { labelRadius = radius + chartConfig.labelPadding; d3.select(this.parentNode).select('.legend') .transition() .attr("transform", function(d) { var c = arc.centroid(d), x = c[0], y = c[1], height = Math.sqrt(x * x + y * y); return "translate(" + (x / height * labelRadius) + ',' + (y / height * labelRadius) + ")"; }); }) ... }