In this reprex Im changing the opacity of the hovered over line, but the change is really slow - is there any way to optimize this process when you have a lot of traces?
codepen: https://codepen.io/MayaRGans/pen/LYQJdqZ?editors=1111
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv"></div>
<script>
</script>
</body>
</html>
let x = []
for (let i = 0; i < 100; i++) {
x.push([1,2,3,4])
}
let y = []
for (let i = 0; i < 50; i++) {
y.push(Array.from({length: 4}, () => Math.floor(Math.random() * 40)))
}
let plotData = x.map((n,i) => {
return ({
x: n,
y: y[i],
type: 'scattergl',
mode: 'lines',
hoverinfo: 'none'
})
})
const plotDiv = document.getElementById('myDiv');
Plotly.newPlot(plotDiv, plotData).then(gd => {
gd.on('plotly_hover', d => {
var curveNumber = d.points[0].curveNumber
var opacity_vals = gd.data.map((_,i)=> i === curveNumber ? 1 : 0.2)
Plotly.restyle(gd, 'opacity', opacity_vals)
}).on('plotly_unhover', d => {
var opacity_vals = gd.data.map(x => 1)
Plotly.restyle(gd, 'opacity', opacity_vals)
})
})
any help appreciated!