Изменить цвет выбранной точки с помощью Javascript или ploxyplot на графике: точка, выбранная графиком или таблицей данных - PullRequest
Новая
       24

Изменить цвет выбранной точки с помощью Javascript или ploxyplot на графике: точка, выбранная графиком или таблицей данных

0 голосов
/ 27 мая 2020

У меня есть блестящее приложение, состоящее из разных модулей с графиком и таблицей данных.

В настоящее время взаимодействие между графиком и таблицей данных проходит по координатам, сохраненным в реактивных значениях.

Когда я нажимаю строки таблицы данных, появляются красные точки на графике, а когда я нажимаю на график, появляется только одна точка. Это нормальная ситуация, так что я хочу. 

Show_plot <- function(){
    output$plot <- renderPlotly({
     req(rv$data)
     D <- rv$data[rv$currentRows,]
     clusters <- rv$clusters[rv$currentRows]
     selectedCols <- c(NULL, NULL)
     ## Limit selection to two columns otherwise we get a scatterplot matrix
     ## but allow plotting only one variable
      if(length(input$selectedVar) == 1) {
               selectedCols[2] <- rv$selectedVar  # reactive values with columns selected
               selectedCols[1] <- "idx"
      } else {
             selectedCols <- rv$selectedVar
       }
      if(length(selectedCols) > 0 && length(selectedCols) <= 2) {
                p <- ggplot(data = D, aes_string(x = selectedCols[1], y = selectedCols[2], key="idx")) +labs(x = eval(selectedCols[1]), y = eval(selectedCols[2])) +
               geom_point(colour = "grey") +
                coord_cartesian(expand = TRUE)

        if(!is.null(rv$clusters)) {
               p <- p + geom_point(aes(colour = factor(clusters)), alpha = 0.3) +
               scale_colour_brewer(palette = 'Set1') +
               theme(plot.title = element_blank(), legend.title = element_blank())
        }
        p <- p + geom_point(data = D[rv$selectedRows,],
                aes_string(x = selectedCols[1], y = selectedCols[2], key = "idx"),
                colour = "black")   #The part which allows to changes the colors

        p <-ggplotly(p, tooltip = "none") %>% layout(legend = list(orientation = "v", x = 1, y = 0.8))%>% config(p = ., staticPlot = FALSE,
 doubleClick = "reset+autosize", 
autosizable = TRUE, displayModeBar = TRUE,
                 sendData = FALSE, displaylogo = FALSE,
                 modeBarButtonsToRemove = c("sendDataToCloud", "lasso2d", "select2d","hoverCompareCartesian")) # Control Plotly's tool bar

Проблема в том, что каждый раз, когда я щелкаю в другой точке, мой сюжет каждый раз перезаряжается, поэтому он не оптимизирован, и я пытаюсь улучшить это. Я хотел бы иметь только выбранную мной точку, которая меняет, а не перезаряжает график каждый раз.

Я пытался использовать прокси-график с 

plotlyProxy("plot", session) %>%
      plotlyProxyInvoke("restyle", list(data= rv$data[rv$currentRows,][rv$selectedRows,],
       aes_string(x = rv$selectedVar[1], y = rv$selectedVar[2]),
        data.marker.color = "black"))

, но он не работает, возможно, потому что я не 'Не используйте правильно или потому что это не напрямую' plot_ly ', который я использовал.

Я пытался использовать напрямую javascript с rshiny с этим и строкой в ​​графике: 

javascript <- "
function(el, x){
  el.on('plotly_click', function(data) {
    var colors = [];
    // check if color is a string or array
    if(typeof data.points[0].data.marker.color == 'string'){
      for (var i = 0; i < data.points[0].data.marker.color.length; i++) {
        colors.push(data.points[0].data.marker.color);
        console.log('ok1')
      }
    }// else {
      //colors = data.points[0].data.marker.color;
      //console.log('ok2')
    //}


    // set color of selected point
    colors[data.points[0].pointNumber] = 'red';
    Plotly.restyle(el,
      {'marker':{color: colors}},
      [data.points[0].curveNumber]
    );
  });
}
" 

...
p <-ggplotly(p, tooltip = "none") 
toWebGL(p)%>% onRender(javascript) #the end of the show_plot() with javascript

Он работает для графика, но я теряю взаимодействие между графиком и таблицей, когда я нажимаю на строку таблицы, на графике не появляется точка.

Я не знаю, как я могу восстановить соединение как график, так и таблица данных с javascript. Может быть, если я передам координаты прямо в коде JavaScript?

Итак, я знаю, что это большое объяснение, я пытался объяснить, как могу. Если у вас есть идеи по поводу того, что я сделал, или у вас есть другое решение, я беру его.

Спасибо!

...