D3 mouse interaction differs from touch events, such as clicking -> supported touch event

Searching for examples of using D3 on a mobile device with touch events instead of mouse events has been challenging. I am unable to find clear information on what touch event corresponds to each mouse event, such as click or dblclick. This has hindered my progress in adapting my D3 visualizations to support touch interactions.

I require suitable touch events for:

  • Zooming (or will it work for both?): 
    var zoomed = d3.behavior.zoom().x(x).y(y).scaleExtent([scaleExtentMin, scaleExtentMax]).on("zoom", partitionZoom);
  • click
  • dblclick

The primary task at hand is replacing click with an appropriate touch event.

How can this be achieved with D3? Alternatively, are there other libraries that pair well with D3 and handle touch events effectively?

Any assistance on this matter would be greatly valued!

javascriptd3.js

Answer №1

SVG supports the same events as HTML containers, including click and tap events with the only difference being a 300ms delay. You have the option to use Hammer as previously recommended or simply utilize jQuery Mobile.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to insert a button at the end of the last row in the first column and also at the

I am working on a JavaScript project that involves creating a table. My goal is to dynamically add buttons after the last row of the first column and also at the top of the last column. for (var i = 0; i < responseData.length; i++) { fo ...

javascriptjquery

Windows location does not change after an XMLHttpRequest is made

Here is my code that uses XMLHttpRequest: function SignUp() { signUpConnection = new XMLHttpRequest(); signUpConnection.onreadystatechange = processRegistration; signUpConnection.open('GET', 'index.php?registrarse=&username= ...

javascriptajaxxmlhttprequest

Focusing on the active element in Typescript

I am working on a section marked with the class 'concert-landing-synopsis' and I need to add a class to a different element when this section comes into focus during scrolling. Despite exploring various solutions, the focused variable always seem ...

javascripttypescript

How to troubleshoot NodeJS errors when piping data from tar packing to webhdfs

I am currently in the process of developing a node application that utilizes Hadoop as a long-term storage solution for data when one of my services is not operational. To optimize efficiency and minimize processing time due to anticipated high transfer vo ...

javascriptnode.jshadooptarwebhdfs

Retrieve the concealed division element's HTML content along with its formatting

Help needed with appending a hidden div with its styles intact. Despite using the code provided below, the appended div does not retain its styles. Any suggestions for an alternative method? var warningMessage = $('#warningDiv').html() fun ...

javascriptjqueryhtmlcss

XMLHttpRequest Error: The elusive 404 code appears despite the existence of the file

This is the organization of my project files: The folders Voice, Text, and Template are included. https://i.stack.imgur.com/9un9X.png When I execute python app.py and navigate to localhost http://0.0.0.0:8080/, the index.html page is displayed with conte ...

javascriptpythonajaxxmlweb.py

The $.each function seems to be stuck and not cycling through the

Dealing with a rather intricate JSON structure, I'm encountering difficulty iterating through it using the $.each() function. It seems to be related to the unusual 2-dimensional array passed in the value section of the standard array (hopefully that m ...

javascriptjsonajax

Establish a global variable within the utils.js module in a Node.js environment

Hey there, I'm currently in the process of trying to figure out how to properly define a global variable in node.js. I am aware that it's not considered best practice, but in this specific scenario, it seems like the only way to go without involv ...

javascriptnode.jsexpress

Attempting to choose everything with the exception of a singular element using the not() function in Jquery

Within the mosaic (div #mosaique) are various div elements. My goal is to make it so that when I click on a specific div, like #langages or #libraries, the other divs become opaque while the selected div undergoes a size change (which works correctly in t ...

javascriptjqueryhtmlcssselector

Is there a way to order the execution of two functions that each produce promises?

With my code, I first check the status of word.statusId to see if it's dirty. If it is, I update the word and then proceed to update wordForms. If it's clean, I simply update wordForms. I'm looking for advice on whether this is the correct a ...

javascripttypescript

The use of script src with vue.js is causing issues

I am looking to move my Vue code into an external .js file. Since I am new to Vue, I am trying to keep it simple without using webpack. However, I have encountered an issue where Vue does not work when using the script src tag in the html file. For instanc ...

javascripthtmlvue.js

Components in React are unable to be accessed

I'm a complete beginner when it comes to React and I'm facing issues with organizing my components into separate files. The error message I encounter is: ERROR in ./src/App.js 5:0-34 Module not found: Error: You attempted to import /components/ ...

javascriptreactjs

How to get the most out of the $scope variable?

Is it possible to assign a regular JavaScript variable the current value of an Angular $scope variable without having their values binded together? //$scope.var1 is set to a specific value, for example, 5 var v2 = $scope.var1; //$scope.var1 is then update ...

javascriptangularjsangularjs-scope

Issues with sending data from JavaScript to ActionScript in Internet Explorer

My attempt to transfer a string from an HTML page (using JavaScript) to a SWF file (ActionScript 2) was not successful. After some research on Google, I came across this page. However, the example code (version 1) mentioned on the page did not work in In ...

javascriptflashactionscript

Dealing with a unique key error in a loop while using React and Google

I've implemented a react-google-maps component that successfully retrieves data from various locations. However, I'm encountering an error message in the console: Warning: Each child in a list should have a unique "key" prop. I made s ...

javascriptreactjs

Creating engaging video call games using React-Native

I need assistance with developing a react-native video call app using agora.io. I want to incorporate interactive games for users to play during the calls, similar to those available on Facebook messenger. Can anyone point me towards helpful resources or t ...

javascriptreactjsreact-nativevideoagora.io

What is the best approach to display a fluctuating price depending on specific options chosen in Next.js?

When working with 2 different select tags and rendering images based on the selection, I also want to display a price determined by the options chosen. For instance, selecting "Your Current Division" as Iron and "Your Desire League" as Bronze/Silver/Gold s ...

javascripthtmlcssreactjsnext.js

error is not defined in the onsuccess function of the ajax.beginform partial view

Currently, I am working on an MVC5 project where a View is calling a Partial View. Within the Partial View, there is an Ajax.BeginForm that triggers a function on OnSuccess. However, during execution, I encounter an error stating that the function cannot ...

javascriptajaxasp.net-mvcpartial-views

Implement a FOR loop in conjunction with an AJAX request

My goal is to send an AJAX request with multiple form fields and use an array for validations. I would like to also pass these values via AJAX: Although I haven't used a for loop in JavaScript before, it looks familiar. The current approach of the l ...

javascriptajaxjqueryloopsfor-loop

Tips for calculating the total of each row and column in a table with jQuery

<table id="repair-invoice"> <tr> <th>Item</th> <th>Parts</th> <th>Labor</th> <th>Total</th> </tr> <tr> <td>Oil Change</td&g ...

javascriptjqueryhtmlsumhtml-table