闪亮更新点击的点以突出显示它 [英] Shiny update the clicked point to highlight it

问题描述

这是一个提取点击事件的工作示例.我想问你是否有办法通过增加大小或突出显示等来更新点击的点?

Here is a working example of extracting the on-click event. I would like to ask you if there is a way to update the clicked point with either increase in size or highlight it etc.,?

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 和其他适当的来源以找到以下问题的解决方案，但找不到.

更新:

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

• This solution works better for this toy plot. But, my original use case contains 50+ levels for the variable of interest and there are high chances that Magenta or any other color would already be present. Also, it takes a considerable amount of time to change the color.
• Is there any way to increase the size of the clicked point to differentiate it from 100s of nearby points?

此处提出了一个更改点击点形状的相关问题.

A related question to change the shape of the clicked point has been asked here.

推荐答案

你可以添加 Plotly 的 htmlwidget 的 onrender 函数将 rel="nofollow noreferrer">事件 添加到您的 Shiny 应用程序.

You could add Plotly's events to your Shiny app with htmlwidget's onrender function.

ggplotly(p) %>% onRender(javascript)

colors 数组被传递给 restyle 函数.选定的点 (pointNumber) 为洋红色，而其他点则从图例中获取颜色.你可以用 marker 大小做同样的事情，标记符号有点棘手，因为 Plotly 在这里不接受数组.

An array of colors is passed to the restyle function. The selected point (pointNumber) is colored magenta while the others get the color from the legend. You could do the same thing with the marker size, marker symbol is a bit more tricky because Plotly does not accept arrays here.

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)

<小时>

一些解释:

---

Some explanations:

• 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
• 可以使用任何 htmlwidget 功能添加Javascript或HTML代码，例如onrender 在这种情况下

• Plotly's events, e.g. plotly_click pass some information (data in this case) in the event function
• data.points contains the points for which the event was triggered
• in this case, we only have one point data.points[0] where pointNumber is the index of the original array and curveNumber is the trace number.
• Plotly stores all the input data in the div where the plot is drawn
• We can access it via document.getElementsByClassName('plotly')[0].data
• The legend can be accessed via document.getElementsByClassName('legendpoints')[i] where i is the index of the legend
• ggplotly or plot_ly return htmlwidgets
• Javascript or HTML code can be added with any of the htmlwidget functions, e.g. onrender in this case

这篇关于闪亮更新点击的点以突出显示它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！