Skip to content

Instantly share code, notes, and snippets.

@terbo

terbo/.block

Forked from emeeks/index.html
Last active November 20, 2016 20:36
Show Gist options
  • Save terbo/31db866d79538f5247d4c5824e8f068f to your computer and use it in GitHub Desktop.
Save terbo/31db866d79538f5247d4c5824e8f068f to your computer and use it in GitHub Desktop.
Download ZIP
d3.touches array data on touch
Raw
.block
license: mit
Raw
README.md
Raw
index.html
7<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>D3 Touch 1</title>
<meta charset="utf-8" />
</head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
body, html {
margin: 0 0 0 0;
padding: 0 0 0 0;
width:100%;
height:100%;
overflow-y: hidden;
overflow-x: hidden;
}
#vizContainer {
width:100%;
height:100%;
}
svg {
width: 100%;
height: 100%;
}
#buttons {
width: 100%;
height: 100%;
position: fixed;
z-index: 1;
top: 0;
}
</style>
<body onload="touchDemo1()">
<div id="vizContainer">
<svg></svg>
<div id="buttons">
</div>
</div>
<footer>
<script>
function touchDemo1() {
var color = d3.scale.category20()
d3.select("svg").on("touchstart", touchStatus);
d3.select("svg").on("touchmove", touchStatus);
function touchStatus() {
d3.event.preventDefault();
d3.event.stopPropagation();
d = d3.touches(this);
d3.select("#vizContainer")
.selectAll("circle")
.data(d)
.enter()
.append("svg:circle")
.attr({r: 5, w: 5, h: 5, rx: d[0][0], ry: d[0][1] })
d3.select("#vizContainer")
.select("circle")
.data(d)
.exit()
.remove();
d3.select('#vizContainer')
.selectAll('circle')
.attr('fill', function(d) { return color(d) });
}
}
</script>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment