r - Shiny 更新点击点以突出显示它

Question

这是提取点击事件的工作示例。我想问您是否有办法通过增加尺寸或突出显示等方式来更新点击点？

library(shiny)
library(plotly)

ui <- fluidPage(
    plotlyOutput("plot"),
    verbatimTextOutput("click")
)

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)

    })

    output$click <- renderPrint({
        d <- event_data("plotly_click")
        if (is.null(d)) "Click events appear here (double-click to clear)" 
        else cat("Selected point associated with Car: ", d$key)
    })

}

shinyApp(ui, server)

我已经搜索了 SO 和其他适当的来源来寻找以下问题的解决方案，但找不到。

更新:

• This解决方案更适合这个玩具 plotly 。但是，我最初的用例包含感兴趣的变量的 50 多个级别，并且很可能已经存在洋红色或任何其他颜色。而且，改变颜色需要相当长的时间。
• 有没有办法增加点击点的大小，以将其与附近数百个点区分开来？

已提出更改单击点形状的相关问题here .

Answer 1

您可以添加 Plotly 的 events使用 htmlwidget 的 onrender 函数连接到您的 Shiny 应用程序。

ggplotly(p) %>% onRender(javascript)

颜色数组被传递给restyle函数。选定的点 (pointNumber) 为洋红色，而其他点则从图例中获取颜色。您可以对 marker 大小执行相同的操作，标记符号有点棘手，因为 Plotly 此处不接受数组。

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]
                  );

  });
}

<小时/>

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]
                  );
    //make sure all the other traces get back their original color
    for (i = 0; i < document.getElementsByClassName('plotly')[0].data.length; i += 1) {
      if (i != data.points[0].curveNumber) {
        colors = [];
        base_color = document.getElementsByClassName('legendpoints')[i].getElementsByTagName('path')[0].style['stroke'];
        for (var p = 0; p < document.getElementsByClassName('plotly')[0].data[i].x.length; p += 1) {
          colors.push(base_color);
        }
        Plotly.restyle(el, 
                       {'marker':{color: colors}}, 
                       [i]);
      }
    };
  });
}"
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)

<小时/>

一些解释:

• Plotly 的事件，例如plotly_click 在事件函数中传递一些信息(本例中为data)
• data.points 包含触发事件的点
• 在这种情况下，我们只有一个点data.points[0]，其中pointNumber是原始数组的索引，curveNumber是跟踪编号。
• Plotly 将所有输入数据存储在绘制绘图的 div 中
• 我们可以通过 document.getElementsByClassName('plotly')[0].data 访问它
• 可以通过 document.getElementsByClassName('legendpoints')[i] 访问图例，其中 i 是图例的索引
• ggplotly 或plot_ly 返回 htmlwidgets
• Javascript 或 HTML 代码可以通过任何 htmlwidget functions 添加，例如在这种情况下onrender