Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

update touch recipe

  • Loading branch information...
commit 5712aecb0246782ec54ffb575ce28bf44dadedf8 1 parent e94725e
@NickQiZhu authored
Showing with 33 additions and 22 deletions.
  1. +33 −22 src/chapter10/touch.html
View
55 src/chapter10/touch.html
@@ -36,7 +36,9 @@
<body>
<script type="text/javascript">
- var initR = 100, r = 400, thickness = 20;
+ var initR = 100,
+ r = 400,
+ thickness = 20;
var svg = d3.select("body")
.append("svg");
@@ -48,33 +50,40 @@
function touch() {
d3.event.preventDefault();
- var arc = d3.svg.arc().outerRadius(initR).innerRadius(initR - thickness);
+ var arc = d3.svg.arc()
+ .outerRadius(initR)
+ .innerRadius(initR - thickness);
+
+ console.log(d3.touches(svg.node()));
+
var g = svg.selectAll("g.touch")
.data(d3.touches(svg.node()), function (d) {
return d.identifier;
});
g.enter()
- .append("g")
- .attr("class", "touch")
- .attr("transform", function (d) {
- return "translate(" + d[0] + "," + d[1] + ")";
+ .append("g")
+ .attr("class", "touch")
+ .attr("transform", function (d) {
+ return "translate(" + d[0] + "," + d[1] + ")";
+ })
+ .append("path")
+ .attr("class", "arc")
+ .transition().duration(2000).ease('linear')
+ .attrTween("d", function (d) {
+ var interpolate = d3.interpolate(
+ {startAngle: 0, endAngle: 0},
+ {startAngle: 0, endAngle: 2 * Math.PI}
+ );
+ return function (t) {
+ return arc(interpolate(t));
+ };
})
- .append("path")
- .attr("class", "arc")
- .transition().duration(2000)
- .attrTween("d", function (d) {
- var interpolate = d3.interpolate({startAngle: 0, endAngle: 0},
- {startAngle: 0, endAngle: 2 * Math.PI});
- return function (t) {
- return arc(interpolate(t));
- };
- })
- .each("end", function (d) {
- if (complete(g))
- ripples(d);
- g.remove();
- });
+ .each("end", function (d) {
+ if (complete(g))
+ ripples(d);
+ g.remove();
+ });
g.exit().remove().each(function () {
this.__stopped__ = true;
@@ -92,7 +101,9 @@
.attr("cy", position[1])
.attr("r", initR - (thickness / 2))
.style("stroke-width", thickness / (i))
- .transition().delay(Math.pow(i, 2.5) * 50).duration(2000).ease('quad-in')
+ .transition()
+ .delay(Math.pow(i, 2.5) * 50)
+ .duration(2000).ease('quad-in')
.attr("r", r)
.style("stroke-opacity", 0)
.each("end", function () {
Please sign in to comment.
Something went wrong with that request. Please try again.