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 时，它应该会改变颜色，并且该颜色应该保持不变，直到他关闭闪亮的应用程序。颜色不应恢复到原来的颜色。也许对 Javascript 函数有一个小的改动。谢谢！

标签： javascriptrshinyr-plotlyggplotly

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)