闪亮更新单击的点以突出显示它 [英] 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的

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是跟踪号.
• 将所有输入数据绘制在绘制该图的div中
• 我们可以通过document.getElementsByClassName('plotly')[0].data
访问它
• 可以通过document.getElementsByClassName('legendpoints')[i]访问图例，其中i是图例的索引
• ggplotly或plot_ly返回htmlwidgets
• JavaScript或HTML代码可以与任何htmlwidget 函数一起添加. 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屋！