Skip to content

Instantly share code, notes, and snippets.

@djtriptych
Forked from mbostock/.block
Last active August 29, 2015 14:11
Show Gist options
  • Save djtriptych/7e33122070b4919fb7e3 to your computer and use it in GitHub Desktop.
Save djtriptych/7e33122070b4919fb7e3 to your computer and use it in GitHub Desktop.

On hover, these arcs extend outward slightly and darken. Increasing the outer radius of the hovered arc temporarily exaggerates its area, but is useful for emphasis.

Note that the padding between adjacent arcs remains constant when arcs extend or contract. This is achieved by specifying an explicit arc.padRadius that is the same for all arcs, rather than relying on the default behavior which depends on the arc’s inner and outer radii.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
fill: #ccc;
stroke: #333;
stroke-width: 1.5px;
transition: fill 250ms linear;
transition-delay: 150ms;
}
path:hover {
fill: #999;
stroke: #000;
transition-delay: 0;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var data = [1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 44];
var width = 960,
height = 500;
var outerRadius = height / 2 - 20,
innerRadius = outerRadius / 3,
cornerRadius = 10;
var pie = d3.layout.pie()
.padAngle(.02);
var arc = d3.svg.arc()
.padRadius(outerRadius)
.innerRadius(innerRadius);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 3 + "," + height / 2 + ")");
svg.selectAll("path")
.data(pie(data))
.enter().append("path")
.each(function(d) { d.outerRadius = outerRadius - 20; })
.attr("d", arc)
.on("mouseover", arcTween(outerRadius, 0))
.on("mouseout", arcTween(outerRadius - 20, 150));
function arcTween(outerRadius, delay) {
return function() {
d3.select(this).transition().delay(delay).attrTween("d", function(d) {
var i = d3.interpolate(d.outerRadius, outerRadius);
return function(t) { d.outerRadius = i(t); return arc(d); };
});
};
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment