Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
118 lines (99 sloc) 3.152 kb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1"/>
<title>Multi-Touch</title>
<link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
<script type="text/javascript" src="../../lib/d3.js"></script>
<style type="text/css">
html, body {
height: 100%;
}
body {
margin: 0;
}
svg {
width: 100%;
height: 100%;
}
circle {
fill: none;
stroke: steelblue;
}
.arc {
fill: steelblue;
stroke: none;
}
</style>
</head>
<body>
<script type="text/javascript">
var initR = 100,
r = 400,
thickness = 20;
var svg = d3.select("body")
.append("svg");
d3.select("body")
.on("touchstart", touch)
.on("touchend", touch);
function touch() {
d3.event.preventDefault();
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("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));
};
})
.each("end", function (d) {
if (complete(g))
ripples(d);
g.remove();
});
g.exit().remove().each(function () {
this.__stopped__ = true;
});
}
function complete(g) {
return g.node().__stopped__ != true;
}
function ripples(position) {
for (var i = 1; i < 5; ++i) {
var circle = svg.append("circle")
.attr("cx", position[0])
.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')
.attr("r", r)
.style("stroke-opacity", 0)
.each("end", function () {
d3.select(this).remove();
});
}
}
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.