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
Post a Comment