A simple demo showing the information d3.touches stores in its array for Chapter 12 of D3.js in Action.
forked from emeeks's block: d3.touches array data on touch
Last active
October 15, 2016 17:04
-
-
Save steltenpower/630aa31209106096fa8f550351230aa7 to your computer and use it in GitHub Desktop.
d3.touches array data on touch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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