Hi folks,
I’ve been attempting to trigger the hover tooltip by generating a correctly-formatted mouse event. In particular, this event is triggered by a touch tap (where a “tap” event is available in the framework I’m working in).
I’ve been following the examples here (1, 2) to generate a plotly_hover event. I’ve also attempted to follow the examples here (*3 , *4) to generate a plotly_click event. I’ve been unsuccessful.
Specifically, the following code does not generate a plotly_hover or a plotly_click event, yet the event itself triggers:
HTML:
<div id="myDiv"></div>
JavaScript:
var d3 = Plotly.d3,
N = 100,
x = d3.range(N),
y1 = d3.range(N).map( d3.random.normal() ),
y2 = d3.range(N).map( d3.random.normal(-2) ),
y3 = d3.range(N).map( d3.random.normal(2) ),
trace1 = { x:x, y:y1, type:'scatter', mode:'lines', name:'Jeff' },
trace2 = { x:x, y:y2, type:'scatter', mode:'lines', name:'Terren' },
trace3 = { x:x, y:y3, type:'scatter', mode:'lines', name:'Arthur' },
data = [ trace1, trace2, trace3 ],
layout = {
hovermode: 'closest',
title: 'Tap on Points to add an Annotation on it'
};
Plotly.newPlot('myDiv', data, layout);
var myPlot = document.getElementById('myDiv');
// I have a tap event available in my framework (Ionic), not normally available.
myPlot.addEventListener('tap', (event) => tapEvent(event));
myPlot.on('plotly_click', (data) => console.log('plotly_click triggered'));
myPlot.on('plotly_hover', (data) => console.log('plotly_hover triggered'));
function tapEvent(event) {
console.log('tap event triggered');
var fullOpts = {
bubbles: true,
clientX: event.center.x,
clientY: event.center.y
};
event.target.dispatchEvent(new MouseEvent('mousemove', fullOpts));
event.target.dispatchEvent(new MouseEvent('mousedown', fullOpts));
event.target.dispatchEvent(new MouseEvent('mouseup', fullOpts));
event.target.dispatchEvent(new MouseEvent('click', fullOpts));
}
This code dispatches the event on the tap event target, but I’ve also tried dispatchEvent on a target acquired via document.elementFromPoint(event.center.x, event.center.y) as well as my top-level graph div, document.getElementById('myDiv');. None of these targets work. I’ve also attempted dispatching just a “mouseover” event (to trigger “plotly_hover”), but this also does not work.
I’ve confirmed that the event.center.x and event.center.y exactly match the clientX and clientY values generated on a normal mouse click (a click with a mouse also generates a tap event in this framework, so I can compare the two simultaneous events generated from the same physical action – however, moving to a tap triggered by touch no longer triggers “plotly_click”).
Any suggestions or pointers on what to try next?
* New users can only put two links in a post, so the other two refs are located in the same GitHub repo at the filepaths:
*3 test/jasmine/tests/click_test.js
*4 test/jasmine/assets/click.js
