AngularJS D3JS Donut chart colour change of arc on hover

Issue

I am creating donut using d3.js with AngularJS. Here is my Donut, by default I need to have same color for all the arcs of Donut chart, which is working fine. Now on hover of the particular arc I need to change the color of that particular arc to blue, which is not working. Can any one help me in this?

Below is the answer from the refernce plunker provided. :

 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) + ")";
                });

 
           })
...
}

Solution

Using d3's style method inside your directive's scope.mouseOverPath and scope.mouseOutPath methods did the trick.

https://plnkr.co/edit/P98rPVKOHOgN5fKB

Answered By - Jacob Stamm