Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

3d scatterplot no event triggered

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.

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

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?

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.

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.

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.

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:
https://plot.ly/~quancore/7/

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

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.

Ok weird. Which Chrome version?

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

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