javascript - 使用 R Shiny 更改点击点的颜色并保持不变

Question

我正在尝试使用 plotly 创建图表。当用户使用 R shiny 单击绘图中的任何 geom_point 时，它应该更改颜色并保持不变。

目前，我的代码运行良好。当用户点击图中的任何 geom_point 时，它会改变颜色。但是当我点击另一个 geom_point 时，之前突出显示的点会恢复到原来的颜色。

    library(shiny)
    library(plotly)
    library(htmlwidgets)

    ui <- fluidPage(
      plotlyOutput("plot")
    )


    javascript <- "
    function(el, x){
      el.on('plotly_click', function(data) {
        colors = [];

        var base_color = document.getElementsByClassName('legendpoints')[data.points[0].curveNumber].getElementsByTagName('path')[0].style['stroke']
        for (var i = 0; i < data.points[0].data.x.length; i += 1) {
          colors.push(base_color)
        };
        colors[data.points[0].pointNumber] = '#FF00FF';
        Plotly.restyle(el,
                       {'marker':{color: colors}},
                       [data.points[0].curveNumber]
                      );
      });
    }"


    server <- function(input, output, session) {

      nms <- row.names(mtcars)

      output$plot <- renderPlotly({
        p <- ggplot(mtcars, aes(x = mpg, y = wt, col = as.factor(cyl), key = nms)) + 
          geom_point()
        ggplotly(p) %>% onRender(javascript)

      })
    }

    shinyApp(ui, server)

我希望当用户点击任何 geom_point 时，它应该改变颜色并且该颜色应该保持直到他关闭 Shiny 的应用程序。颜色不应恢复到原来的颜色。也许需要对 Javascript 函数进行微小的更改。谢谢!

Answer 1

问题是您总是将所有点都设置为基色，而不是检查实际点的颜色。我不是 JavaScript 专家，但这对我有用:

library(shiny)
library(plotly)
library(htmlwidgets)

ui <- fluidPage(
  plotlyOutput("plot")
)


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);
      }
    } else {
      colors = data.points[0].data.marker.color;
    }
    // some debugging
    //console.log(data.points[0].data.marker.color)
    //console.log(colors)

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

server <- function(input, output, session) {

  nms <- row.names(mtcars)

  output$plot <- renderPlotly({
    p <- ggplot(mtcars, aes(x = mpg, y = wt, col = as.factor(cyl), key = nms)) + 
      geom_point()
    ggplotly(p) %>% onRender(javascript)

  })
}

shinyApp(ui, server)