3d scatterplot no event triggered

plotly.js
1

No event triggered when I clicked or hovered a datapoint.
here is the code:

$(document).ready(function() {
//     myFunction('./data/biwi/biwi_hotel.txt');
insert_data_slider();
var myPlot = document.getElementById('plot');

myPlot.on('plotly_hover', function(data){
	console.log("hovered")

    var infotext = data.points.map(function(d){
      return (d.data.name+': x= '+d.x+', y= '+d.y.toPrecision(3));
    });
    console.log(infotext);
})
myPlot.on('plotly_click', function(){
    alert('You clicked this Plotly chart!');
});

It successfully finds div container but not event is triggered.Plot type is 3dscatter plot.

2

Any help so far? It is a bit hurry therefore any help will be appreciated.

3

It’s a little hard to help given the code snippet you pasted above. Can you share a fully reproducible example to help us help you?

4

Here is related html part:

      <div class="container-fluid cliente vh-95">
        <div class="container-fluid cliente vh-50">
        <div id="plot" class="responsive-plot"></div>
      </div>
      <div class="container-fluid cliente vh-42">
    </div>
    </div>

related javascript code is for plotting 3d scatter plot:

var layout = {margin: {
l: 0,
r: 0,
b: 0,
t: 0,
autosize: true
}};

function draw_graph(values){
var data = ;
for (var i = 0; i < values.length; i++) {
var cluster = values[i].cluster;

var trace = {
	x:values[i].x, y: values[i].y, z: values[i].frame_num,
	mode: 'markers',
	marker: {
		size: 5,
		line: {
		//color: 'rgba(217, 217, 217, 0.14)',
		width: 0.5},
		opacity: 0.8},
	type: 'scatter3d'
};
data.push(trace);

}
Plotly.react(‘plot’, data, layout);
}

The graph is successfully drawn. However, no data event is working.
here is initializing event listeners:

$(document).ready(function() {
// myFunction(‘./data/biwi/biwi_hotel.txt’);
insert_data_slider();
var myPlot = document.getElementById(‘plot’);

myPlot.on(‘plotly_hover’, function(data){
console.log(“hovered”)

var infotext = data.points.map(function(d){
  return (d.data.name+': x= '+d.x+', y= '+d.y.toPrecision(3));
});
console.log(infotext);

})
myPlot.on(‘plotly_click’, function(){
alert(‘You clicked this Plotly chart!’);
});
});

I really hope this code snippets will help because I did not deploy the app and it is still my localhost.Thanks in advance.

5

And also I did not find any example about hover data and show label for 3dscatter plot in plotly.js even in official web page.I need to also show information about points on hover.

6

Where is your draw_graph routine getting called? I suspect it is getting called after you hook in your plotly_hover and plotly_click handlers.

7

I retyped the code a bit.Now it is like this:

function draw_graph(values, div){
var data = ;
for (var i = 0; i < values.length; i++) {
var cluster = values[i].cluster;

var trace = {
	x:values[i].x, y: values[i].y, z: values[i].frame_num,
	mode: 'markers',
	marker: {
		size: 15,
		line: {
		//color: 'rgba(217, 217, 217, 0.14)',
		width: 0.5},
		opacity: 0.8},
	type: 'scatter3d'
};
data.push(trace);

}
Plotly.react(div, data, layout);
hook_event_listener(div);
}

function hook_event_listener(plot){
console.log(plot);

plot.on(‘plotly_hover’, function(data){
console.log(“hovered”)

  var infotext = data.points.map(function(d){
    return (d.data.name+': x= '+d.x+', y= '+d.y.toPrecision(3));
  });
  console.log(infotext);

})
plot.on(‘plotly_click’, function(){
alert(‘You clicked this Plotly chart!’);
});
}
and here is the console log of first print in hook_event_listener:
Screenshot%20from%202018-05-01%2022-42-45
It seems hooked object includes plot.And this line of codes works without error.However, when I click a point, nothing happens in console or no alert.
and here is the link of plot:
scatter3d made by Quancore | plotly

8

Can you confirm that this https://codepen.io/etpinard/pen/deWayR?editors=0011 works?

9

Now here is the situation:
Your code is not working (no event firing) on google chrome.However, I switch to firefox and it is working.Regarding the change, I also tried my app on firefox and it is working!!!However, I have no idea why any kind of event triggering is not working on google chrome.For example:

function draw_graph(values, div){
var data = ;
for (var i = 0; i < values.length; i++) {
var cluster = values[i].cluster;
var cluster_name = "cluster "+i

  if(cluster == -1)
  	cluster_name = "noise"


var trace = {
	x:values[i].x, y: values[i].y, z: values[i].frame_num,
	mode: 'markers',
  	name: cluster_name,
	marker: {
		size: 15,
		line: {
		//color: 'rgba(217, 217, 217, 0.14)',
		width: 0.5},
		opacity: 0.8,
  	},
  	hoverinfo:"all",
  	hovertext:"",
	type: 'scatter3d'
};
data.push(trace);

}
Plotly.react(div, data, layout);
hook_event_listener(div);
}
THis modified code is not working as well in chrome.Simply I could not interact with data points but it is working on firefox as expected.I do not know it is a bug or not.
My system : ubuntu 18.04. I can provide any kind of info.

10

Ok weird. Which Chrome version?

11

Chrome : Version 65.0.3325.181 (Official Build) (64-bit)
OS:

Screenshot%20from%202018-05-02%2021-16-57
Screenshot from 2018-05-02 21-16-57.png718×309 43.8 KB

12

Ok. Would you care to open a new bug report about it https://github.com/plotly/plotly.js/issues/new ?