body {margin:0; font-family:'Inter', sans-serif; background-color:#f5f5f5; height:100vh;}
.plot-container {width:100vw; height:100vh; background:white; overflow:hidden;}
function generateRandom(count){
return Array.from({length:count},()=>Math.floor(Math.random()*100)+1);
}
const data = {
x: generateRandom(100),
y: generateRandom(100),
x2: generateRandom(100),
y2: generateRandom(100),
x3: generateRandom(100),
y3: generateRandom(100),
x4: generateRandom(100),
y4: generateRandom(100)
};
let traces = [
{x:data.x, y:data.y, mode:'markers', type:'scattergl', marker:{size:7,color:'blue',opacity:0.7}, selected:{marker:{size:10,color:'red',opacity:1}}, unselected:{marker:{opacity:0.2}}, xaxis:'x1', yaxis:'y1'},
{x:data.x2, y:data.y2, mode:'markers', type:'scattergl', marker:{size:7,color:'green',opacity:0.7}, selected:{marker:{size:10,color:'red',opacity:1}}, unselected:{marker:{opacity:0.2}}, xaxis:'x2', yaxis:'y2'},
{x:data.x3, y:data.y3, mode:'markers', type:'scattergl', marker:{size:7,color:'red',opacity:0.7}, selected:{marker:{size:10,color:'red',opacity:1}}, unselected:{marker:{opacity:0.2}}, xaxis:'x3', yaxis:'y3'},
{x:data.x4, y:data.y4, mode:'markers', type:'scattergl', marker:{size:7,color:'purple',opacity:0.7}, selected:{marker:{size:10,color:'red',opacity:1}}, unselected:{marker:{opacity:0.2}}, xaxis:'x4', yaxis:'y4'}
];
const plotDiv = document.getElementById('plotly-plot');
let layout = {
title:'Plotly 3.1.0 Grid Plot - ScatterGL',
autosize:true,
showlegend:false,
grid:{rows:2, columns:2, pattern:'independent'},
xaxis1:{title:'X1'}, yaxis1:{title:'Y1'},
xaxis2:{title:'X2'}, yaxis2:{title:'Y2'},
xaxis3:{title:'X3'}, yaxis3:{title:'Y3'},
xaxis4:{title:'X4'}, yaxis4:{title:'Y4'},
plot_bgcolor:'white',
paper_bgcolor:'white',
hovermode:'closest',
margin:{t:40,b:40,l:30,r:30},
selectdirection:'any',
selectionrevision:0,
dragmode:'select'
};
Plotly.newPlot(plotDiv, traces, layout, {displayModeBar:true, responsive:true, scrollZoom:true, displaylogo:false});
let lastSelectionSource = null;
plotDiv.on('plotly_selected', async function(eventData){
if(!eventData || !eventData.points || eventData.points.length===0) return;
const sourceTrace = eventData.points[0].curveNumber;
const selectedIndices = Array.from(new Set(eventData.points.map(p=>p.pointIndex)));
console.log(selectedIndices);
if(lastSelectionSource !== null && lastSelectionSource !== sourceTrace){
layout.selectionrevision++;
traces[lastSelectionSource].selectedpoints = null;
await Plotly.react(plotDiv, traces, layout);
}
traces.forEach(t => t.selectedpoints = selectedIndices);
layout.selectionrevision++;
await Plotly.react(plotDiv, traces, layout);
lastSelectionSource = sourceTrace;
});
Я видел, что есть проблемы, связанные с выборами, связанными с выборами, связанными с выборами, связанными с выборами. Plotly.js < /p>
Этот вопрос также связан. Запуск события двойного щелчка в пустой области сбросит выбор. Но я не знаю, как запустить это программно
Подробнее здесь: https://stackoverflow.com/questions/797 ... cumulation
Мобильная версия