exploding the pie slice on hovering the legend in D3 pie chart

Question

I have created a pie chart using D3.js along with legends to match the pie slices.

I am able to explode a pie slice on mouse over and mouse out event.

I need to explode a pie slice and show a tool tip with value corresponding to the pie slice when I hover over the legend.

any pointers to achieve this is appreciated.

Answer 1

Give each 'slice' some text. Give this text an ID and set the text's ID's visibility to hidden in the CSS. On mouseover (or whenever you want to show the tooltip) take off the hidden class, thus, showing the text.

var slice = d3select(slice)
.append("text")
.attr("id", function(d,i)
{
return "text" + i;
}
.classed("hidden", true);

slice.on("mouseover" function(){
d3.select(this)
.classed("hidden", false);
}

.hidden{
visibility:hidden;
}

This won't work with yours yet, obviously, as I wouldn't be selecting the correct elements. If you provide a JSFiddle then maybe I could see if I could show you it working :)

Answer 2

This is how i achieved the exploding of pie slice on hovering over the legend

1) when creating the pie slice added an attribute 'id' with value that would match what i display as legend(label) 2) On mouseOver function on the legend, I get the id using var id= path[id='"+this.textContent+"']" 3) using d3.select using the path we got in step 2 4) use the selection to do the exploding of pie slice.