javascript - d3 handling mouse events in charts -



javascript - d3 handling mouse events in charts -

i trying create interactive pie chart reacts mouse clicks. @ moment made possible tooltip come 1 time pie piece clicked on. how can create disappear if user clicks 1 time again on same slice?

.on("click", function(d) { tooltip.transition() .duration(450) .style("opacity", 0.7); tooltip.html("<b>" + d.name + ": " + d.value + "</b>") .style("left", (d3.event.pagex) + "px") .style("top", (d3.event.pagey-20) + "px"); });

if info in selection objects, can store within each datum whether it's selected or not. example,

.on("click", function(d, i) { if (!d.selected){ tooltip.transition() .duration(350) .style("opacity", 0.9); tooltip.html("<b>" + stats[i].status + ": " + d.value + "</b>") .style("left", (d3.event.pagex) + "px") .style("top", (d3.event.pagey-margin*0.8) + "px"); d.selected = true; // deselect other arcs arcs.each(function(d, j){ if (i != j) d.selected = false; }); } else { tooltip.transition() .duration(200) .style("opacity", 0); d.selected = false; } });

note ensures other arcs deselected when select new arc.

javascript d3.js pie-chart

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -