Я работаю над интерактивной графикой, на которой отображаются черные точки для двух количественных переменных (A и B). Пользователь может выбрать порог. После этого на график наносятся только точки, которые превышают пороговое значение, а также отображается серый прямоугольник, обозначающий область, в которой пороговое значение не превышено. Кажется, все это работает нормально.
Однако сейчас я пытаюсь добиться того, чтобы пользователь мог выбирать определенные точки. При этом выбранные точки должны изменить цвет с черного на красный. Когда пользователь выбирает новое подмножество точек, цвет ранее выбранных точек меняется с красного на черный. Другими словами, единственными точками, которые отображаются красным цветом на графике, должны быть те, которые были выбраны последними.
К сожалению, эта часть не работает. Проблемы прямо сейчас:
1) Выбранные точки постоянно остаются красными. 2) Если выбраны уже красные точки, иногда невыбранные черные точки становятся красными. Вы можете увидеть пример этой ошибки (на картинках) внизу поста.
Я считаю, что это происходит, потому что я просто рисую совершенно новую трассировку красных точек, которые соответствуют выбранным значениям x и y (это ниже в коде, прокомментированном как «// Добавить выбранные пользователем точки красным»). Следовательно, красные точки становятся самостоятельными объектами.
Мой вопрос: каков эффективный способ решения этой проблемы (чтобы выбранные точки становились красными до тех пор, пока не будет выбрано другое подмножество?) Я использую термин «эффективный», потому что я работаю с большими наборами данных (100-1000 точек), и поэтому Я ищу способы сохранить вычислительную скорость. Может быть, более эффективно просто изменить выбранные черные точки на красные, чем полностью перерисовывать наложенные красные точки? Однако я не уверен, как этого добиться, используя синтаксис трассировки Plotly.
Любая помощь будет оценена по достоинству.
Ниже приведена упрощенная версия моего скрипта.
library(plotly)
library(GGally)
library(htmlwidgets)
ui <- shinyUI(fluidPage(
sliderInput("thresh", "Threshold:", min = 0, max = 3, value=1, step=1),
plotlyOutput("myPlot"),
textOutput("selectedValues")
))
server <- shinyServer(function(input, output) {
thresh <- reactive(input$thresh)
set.seed(1)
dat <- data.frame(Row = paste0("Row",sample(c(1:20),20)), A=4*rnorm(20), B=4*rnorm(20))
dat$Row <- as.character(dat$Row)
minVal = min(dat[,-1])
maxVal = max(dat[,-1])
gg <- ggplot(data = dat, aes(x=A, y=B)) + coord_cartesian(xlim = c(minVal, maxVal), ylim = c(minVal, maxVal))
ggY <- ggplotly(gg)
output$myPlot <- renderPlotly(ggY %>% onRender("
function(el, x, data) {
var Points = [];
var Traces = [];
var selRows = [];
data.dat.forEach(function(row){
if(Math.abs(row['B']) > data.thresh) selRows.push(row);});
var xArr = [];
var yArr = [];
var keepIndex = [];
for (a=0; a<selRows.length; a++){
xArr.push(selRows[a]['A'])
yArr.push(selRows[a]['B'])
keepIndex.push(selRows[a]['Row'])
}
Points.push(keepIndex);
// Add points above the threshold in black
var tracePoints = {
x: xArr,
y: yArr,
hoverinfo: 'none',
mode: 'markers',
marker: {
color: 'black',
size: 4
}
};
// Add upper horizontal line of gray box
var hiLine = {
x: [-15,15],
y: [data.thresh,data.thresh],
mode: 'lines',
line: {
color: 'gray',
width: 1
},
opacity: 0.25,
hoverinfo: 'none'
};
// Add lower horizontal line of gray box
var lowLine = {
x: [-15,15],
y: [-1*data.thresh,-1*data.thresh],
mode: 'lines',
fill: 'tonexty',
line: {
color: 'gray',
width: 1
},
opacity: 0.25,
hoverinfo: 'none'
};
Traces.push(tracePoints);
Traces.push(hiLine);
Traces.push(lowLine);
Plotly.addTraces(el.id, Traces);
var idRows = []
for (a=0; a<data.dat.length; a++){
idRows.push(data.dat[a]['Row'])
}
el.on('plotly_selected', function(e) {
numSel = e.points.length
cN = e.points[0].curveNumber;
var pointNumbers = [];
var selData = [];
for (a=0; a<numSel; a++){
pointNumbers.push(e.points[a].pointNumber)
selData.push(data.dat[idRows.indexOf(Points[0][pointNumbers[a]])])
}
Shiny.onInputChange('selData', selData);
var Traces = [];
var xArr = [];
var yArr = [];
for (a=0; a<selData.length; a++){
xArr.push(selData[a]['A'])
yArr.push(selData[a]['B'])
}
// Add user-selected points in red
var traceRed = {
x: xArr,
y: yArr,
mode: 'markers',
marker: {
color: 'red',
size: 4
},
hoverinfo: 'none'
};
Traces.push(traceRed);
Plotly.addTraces(el.id, Traces);
})
}", data = list(dat=dat, thresh=thresh())))
selData <- reactive(input$selData)
output$selectedValues <- renderPrint({selData()})
})
shinyApp(ui, server)
Ниже приведен пример ошибки:
Скажем, я открываю приложение со всеми его значениями по умолчанию и просто Plotly-выбираю четыре верхние правые точки. Результат выглядит хорошо, потому что только эти четыре точки окрашены в красный цвет, как показано ниже:
Теперь предположим, что я повторно выбираю эти четыре верхние точки. Результат больше не выглядит хорошим, потому что хотя эти четыре точки окрашены в красный цвет, две дополнительные точки также ошибочно окрашены в красный цвет:
