闪亮更新点击的点以突出显示它

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 解决方案更适合这个玩具情节。但是，我的原始用例包含 50 多个级别的感兴趣变量，并且很有可能已经存在洋红色或任何其他颜色。此外，更改颜色需要相当长的时间。
• 有什么方法可以增加点击点的大小以将其与附近的 100 个点区分开来？

已向here提出了更改点击点形状的相关问题。

Answer 1

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

ggplotly(p) %>% onRender(javascript)

colors 的数组被传递给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 是跟踪号。
• 绘图将所有输入数据存储在绘制绘图的div中
• 我们可以通过document.getElementsByClassName('plotly')[0].data访问它
• 可以通过document.getElementsByClassName('legendpoints')[i] 访问图例，其中i 是图例的索引
• ggplotly 或 plot_ly 返回 htmlwidgets
• 可以使用任何 htmlwidget functions 添加 Javascript 或 HTML 代码，例如onrender 在这种情况下