archive-gh-me/d3
1
0
Fork 0
mirror of https://github.com/d3/d3.git synced 2026-02-01 16:41:44 +00:00
Code Issues Projects Releases Wiki Activity

Remove donut example.

Browse Source 
Replaced by <http://bl.ocks.org/4341417>.
This commit is contained in:
Mike Bostock 2012-12-19 15:10:27 -08:00
parent 7c8abc0983
commit 24f0b575b7
1 changed files with 0 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
examples/donut/donut.html
View File

@ -1,118 +0,0 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>Donut Chart</title>
<style>
body {
font: 10px sans-serif;
}
</style>
<body>
<script src="../../d3.js"></script>
<script>
var width = 400,
height = 400,
outerRadius = Math.min(width, height) / 2,
innerRadius = outerRadius * .6,
n = 10,
q = 0,
data0 = d3.range(n).map(Math.random),
data1 = d3.range(n).map(Math.random),
data,
color = d3.scale.category20(),
arc = d3.svg.arc(),
donut = d3.layout.pie().sort(null);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.selectAll(".arc")
.data(arcs(data0, data1))
.enter().append("g")
.attr("class", "arc")
.attr("transform", "translate(" + outerRadius + "," + outerRadius + ")")
.append("path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc);
d3.select(window).on("keypress", swap);
function arcs(data0, data1) {
var arcs0 = donut(data0),
arcs1 = donut(data1),
i = -1,
arc;
while (++i < n) {
arc = arcs0[i];
arc.innerRadius = innerRadius;
arc.outerRadius = outerRadius;
arc.next = arcs1[i];
}
return arcs0;
}
function swap() {
d3.selectAll(".arc > path")
.data(++q & 1 ? arcs(data0, data1) : arcs(data1, data0))
.each(transitionSplit);
}
// 1. Wedges split into two rings.
function transitionSplit(d, i) {
d3.select(this)
.transition().duration(1000)
.attrTween("d", tweenArc({
innerRadius: i & 1 ? innerRadius : (innerRadius + outerRadius) / 2,
outerRadius: i & 1 ? (innerRadius + outerRadius) / 2 : outerRadius
}))
.each("end", transitionRotate);
}
// 2. Wedges translate to be centered on their final position.
function transitionRotate(d, i) {
var a0 = d.next.startAngle + d.next.endAngle,
a1 = d.startAngle - d.endAngle;
d3.select(this)
.transition().duration(1000)
.attrTween("d", tweenArc({
startAngle: (a0 + a1) / 2,
endAngle: (a0 - a1) / 2
}))
.each("end", transitionResize);
}
// 3. Wedges then update their values, changing size.
function transitionResize(d, i) {
d3.select(this)
.transition().duration(1000)
.attrTween("d", tweenArc({
startAngle: d.next.startAngle,
endAngle: d.next.endAngle
}))
.each("end", transitionUnite);
}
// 4. Wedges reunite into a single ring.
function transitionUnite(d, i) {
d3.select(this)
.transition().duration(1000)
.attrTween("d", tweenArc({
innerRadius: innerRadius,
outerRadius: outerRadius
}));
}
function tweenArc(b) {
return function(a) {
var i = d3.interpolate(a, b);
for (var key in b) a[key] = b[key]; // update data
return function(t) {
return arc(i(t));
};
};
}
</script>