Skip to content

Instantly share code, notes, and snippets.

@steltenpower

steltenpower/.block

Last active October 15, 2016 17:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save steltenpower/630aa31209106096fa8f550351230aa7 to your computer and use it in GitHub Desktop.
Save steltenpower/630aa31209106096fa8f550351230aa7 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
<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 {
width:100%;
height:100%;
}
#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() {
d3.select("#buttons").html("")
.style("pointer-events", "none")
.append("div").attr("id", "touchStatus")
.append("ol")
.append("li");
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("#touchStatus")
.select("ol")
.selectAll("li")
.data(d)
.enter()
.append("li"); // only for 1st 2 please
d3.select("#touchStatus")
.select("ol")
.selectAll("li")
.data(d)
.exit()
.remove();
d3.select("#touchStatus")
.select("ol")
.selectAll("li")
.html(function(d,i) {
if (i<2) return d}); // now
}
}
</script>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment