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

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个以上的感兴趣变量的等级，并且很有可能Magenta或任何其他颜色已经存在。而且，改变颜色也需要相当长的时间。
• 有什么办法可以增加点击点的大小来区分100点附近的点吗？

改变点击形状的相关问题已被要求here。

Answer 1

你可以Plotly的events你闪亮的应用与htmlwidget'加s onrender功能。

ggplotly(p) %>% onRender(javascript) 

的colors数组传递到restyle功能。选定的点（pointNumber）是彩色洋红色，而其他点则从图例中获取颜色。你可以用大小做同样的事情，标记符号有点棘手，因为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的事件，例如在事件功能
• data.points包含该事件被触发在这种情况下
• 点plotly_click传递（在这种情况下data）的一些信息，我们只有一个点data.points[0]其中pointNumber是原始数组的索引和curveNumber是跟踪号码。
• Plotly卖场里的情节绘制
• 我们可以通过document.getElementsByClassName('plotly')[0].data
• 传说可以通过document.getElementsByClassName('legendpoints')[i]其中i访问访问它在div所有输入数据是传说
• 的指数ggplotly或plot_ly返回htmlwidgets
• Javascript或HTML代码可以添加任何htmlwidget functions，例如onrender在这种情况下