Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active February 9, 2016 02:07
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save mbostock/5247027 to your computer and use it in GitHub Desktop.
Save mbostock/5247027 to your computer and use it in GitHub Desktop.
Download ZIP
Mouseenter
Raw
README.md

This example demonstrates mouseenter and mouseleave events. Mouseenter and mouseleave events are triggered only when the mouse enters or leaves the parent container; unlike mouseover and mouseout, they are not triggered when the mouse moves between descendant elements. This makes it easier to listen for when the mouse enters a group of elements and avoid unnecessary flickering.

For browsers that do not yet support mouseenter and mouseleave events, D3 provides a polyfill on top of the mouseover and mouseout events.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
rect {
fill-opacity: .1;
stroke: #000;
shape-rendering: crispEdges;
}
text {
pointer-events: none;
text-anchor: middle;
font: 12px sans-serif;
text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}
text.mouseenter,
text.mouseleave {
fill: red;
font-weight: bold;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
.call(nest, 6, 30)
.on("mouseenter", flash("mouseenter", "-1em"))
.on("mouseover", flash("mouseover", "0"))
.on("mouseout", flash("mouseout", "1em"))
.on("mouseleave", flash("mouseleave", "2em"));
function flash(name, dy) {
return function() {
d3.select(this).append("text")
.attr("class", name)
.attr("transform", "translate(" + d3.mouse(this) + ")")
.attr("dy", dy)
.text(name)
.transition()
.duration(1500)
.style("opacity", 0)
.remove();
};
}
function nest(svg, levels, step) {
var g = svg.append("g");
g.append("rect")
.attr("x", -(levels + 1) * step)
.attr("y", -(levels + 1) * step)
.attr("width", (levels + 1) * step * 2)
.attr("height", (levels + 1) * step * 2);
if (levels > 0) g.call(nest, levels - 1, step);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment