119 строки
2.7 KiB
HTML
119 строки
2.7 KiB
HTML
<!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>
|