From bd0a1e11e1dc06f6c6ded98134136bffa4551055 Mon Sep 17 00:00:00 2001 From: Dmitry Baranovskiy Date: Fri, 18 Oct 2013 15:38:53 +1100 Subject: [PATCH] Fix for bug #38 --- demos/illustrated-infographic-coffee/demo.svg | 133 ++++++------------ .../illustrated-infographic-coffee/index.html | 31 +++- 2 files changed, 66 insertions(+), 98 deletions(-) diff --git a/demos/illustrated-infographic-coffee/demo.svg b/demos/illustrated-infographic-coffee/demo.svg index 117396f..3bbda28 100644 --- a/demos/illustrated-infographic-coffee/demo.svg +++ b/demos/illustrated-infographic-coffee/demo.svg @@ -4,6 +4,9 @@ + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + Americano + + + Latté + + + Mocha + + + Mochiatto + + + Espresso + + - - - - - + + + + + + + + + - - - - Americano - - - Latté - - - Mocha - - - Mochiatto - - - Espresso - - - - - + + + + + diff --git a/demos/illustrated-infographic-coffee/index.html b/demos/illustrated-infographic-coffee/index.html index 90ab358..e3414bf 100644 --- a/demos/illustrated-infographic-coffee/index.html +++ b/demos/illustrated-infographic-coffee/index.html @@ -98,6 +98,21 @@ closed, grp = s.g().insertBefore(tap); f.select("#pie-chart").remove(); + f.select("#americano-area").click(function () { + chosen(0); + }); + f.select("#latte-area").click(function () { + chosen(72); + }); + f.select("#mocha-area").click(function () { + chosen(144); + }); + f.select("#mochiatto-area").click(function () { + chosen(216); + }); + f.select("#espresso-area").click(function () { + chosen(288); + }); x = +top.attr("cx"); y = +top.attr("cy"); R = +top.attr("rx"); @@ -130,25 +145,31 @@ lastAngle = a; }, function (x, y) { startAngle = Snap.angle(knobcx, knobcy, x, y); + lastAngle = angle; dot.stop(); arr.stop(); }, function () { angle = lastAngle; var a = Snap.snapTo(72, angle, 36); + chosen(a); + }); + function chosen(a) { + a = (a + 1080) % 360; + angle = a; + var to = "r" + [a, knobcx, knobcy]; dot.animate({ - transform: "r" + [a, knobcx, knobcy] + transform: to }, 1000, mina.elastic); arr.animate({ - transform: "r" + [a, knobcx, knobcy] + transform: to }, 1000, mina.elastic, function () { - angle = (a + 1080) % 360; closeCup(function () { - types[angle](); + types[a](); pour(); pieShow(); }); }); - }); + } grp.path(outline(0, h)).attr("class", "outline"); var o3 = (h - 70) / 3,