I am trying to do something similar to http://stuffin.space/ , where I highlight an object and show its path, but only when the object is hovered. With what I have so far, I am able to see it work once, but it is slow, and it fails to work after the first time. Here is the code for this section
var myPlot = document.getElementById('solarPlot')
myPlot.on('plotly_hover', function(data){
var index = data.points[0].pointIndex
var elem = data.points[0].data.elems[index]
//Note that elems is something I stored as a part of plots previously to have the data available. It contains the bare minimum info to plot the trajectory.
var newPlot = determinePlotFromElem(elem) //This returns a plot. The last line of the function is as below
//{x:xs, y:ys, z:zs, mode:'lines', type: 'scatter3d', line:{color:color, width:1}, showlegend: false, hoverinfo:'skip'}
//TODO: Set a better color for this plot!
plots.push(newPlot)
Plotly.react('solarPlot', plots, layout)
});
myPlot.on('plotly_unhover', function(data){
plots = plots.slice(0,numPlots) //This limits the number of plots to the base plots
Plotly.react('solarPlot', plots, layout)
})
It takes about 2 seconds to create the newPlots in the first place, and a similar amount of time to update this temporary plot. Is there a better way to do this, one that will be faster?