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) + ")";
});
})
...
}
Using d3's style method inside your directive's scope.mouseOverPath and scope.mouseOutPath methods did the trick.