A demonstration of handling multitouch events using D3. Requires a touch-supporting browser, such as iOS Safari.
forked from mbostock's block: Multitouch
license: gpl-3.0 |
A demonstration of handling multitouch events using D3. Requires a touch-supporting browser, such as iOS Safari.
forked from mbostock's block: Multitouch
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="initial-scale=1,maximum-scale=1"> | |
<style> | |
html, | |
body { | |
height: 100%; | |
} | |
body { | |
margin: 0; | |
} | |
svg { | |
display: block; | |
overflow: hidden; | |
width: 100%; | |
height: 100%; | |
} | |
</style> | |
<body> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script> | |
var color = d3.scale.category10(); | |
var svg = d3.select("body").append("svg") | |
.attr("width", innerWidth) | |
.attr("height", innerHeight); | |
var circle = svg.selectAll("circle.touch"); | |
d3.select("body") | |
.on("touchstart", touch) | |
.on("touchend", touch); | |
function touch() { | |
d3.event.preventDefault(); | |
circle = circle | |
.data(d3.touches(svg.node()).slice(0,2), function(d) { return d.identifier; }); | |
circle.exit() | |
.attr("class", null) | |
.transition() | |
.attr("r", 96); | |
circle.enter().append("circle") | |
.attr("class", "touch") | |
.attr("r", 1e-6) | |
.style("fill", function(d) { return color(d.identifier); }) | |
.transition() | |
.duration(500) | |
.ease("elastic") | |
.attr("r", 48); | |
circle | |
.attr("cx", function(d) { return d[0]; }) | |
.attr("cy", function(d) { return d[1]; }); | |
} | |
</script> |