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> |
