Commit d07d7098 authored by Mike Bostock's avatar Mike Bostock
Browse files

Remove pie-transition.

Replaced by <http://bl.ocks.org/4341574>.
parent 356d55cb
<!DOCTYPE html>
<meta charset="utf-8">
<title>Pie Chart</title>
<style>
body {
font: 10px sans-serif;
}
</style>
<body>
<script src="../../d3.js"></script>
<script>
var width = 400,
height = 400,
radius = Math.min(width, height) / 2,
data = d3.range(10).map(Math.random).sort(d3.descending),
color = d3.scale.category20(),
arc = d3.svg.arc().outerRadius(radius),
donut = d3.layout.pie();
var svg = d3.select("body").append("svg")
.datum(data)
.attr("width", width)
.attr("height", height);
var arcs = svg.selectAll("g.arc")
.data(donut)
.enter().append("g")
.attr("class", "arc")
.attr("transform", "translate(" + radius + "," + radius + ")");
var paths = arcs.append("path")
.attr("fill", function(d, i) { return color(i); });
paths.transition()
.ease("bounce")
.duration(2000)
.attrTween("d", tweenPie);
paths.transition()
.ease("elastic")
.delay(function(d, i) { return 2000 + i * 50; })
.duration(750)
.attrTween("d", tweenDonut);
function tweenPie(b) {
b.innerRadius = 0;
var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
return function(t) {
return arc(i(t));
};
}
function tweenDonut(b) {
b.innerRadius = radius * .6;
var i = d3.interpolate({innerRadius: 0}, b);
return function(t) {
return arc(i(t));
};
}
</script>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment