I have been attempting to make adjustments to this sample. My goal is to display a word in the center of the donut chart upon mouseover, similar to this:
Although I have included code for mouseover, it seems to not be functioning properly.
Code
const eventObj = {
'mouseover': function (d, i, j) {
pathAnim(d3.select(this).select('path'), 1);
centerTxt.text(function () {
return d.data.label;
})
// .call(wrap, 40);
},
'mouseout': function (d, i, j) {
const thisPath = d3.select(this).select('path');
if (!thisPath.classed('clicked')) {
pathAnim(thisPath, 0);
}
centerTxt.text(function (d) {
return '';
});
},
'click': function(d, i, j) {
var thisPath = d3.select(this);
var clicked = thisPath.classed('clicked');
pathAnim(thisPath, ~~(!clicked));
thisPath.classed('clicked', !clicked);
//setCenterText(thisDonut);
}
};
var pathAnim = function(path, dir) {
switch(dir) {
case 0:
path.transition()
.duration(500)
.ease('bounce')
.attr('d', d3.svg.arc()
.innerRadius((radius-100))
.outerRadius(radius-50)
);
break;
case 1:
path.transition()
.attr('d', d3.svg.arc()
.innerRadius((radius-100))
.outerRadius((radius-50) * 1.08)
);
break;
}
}