閃亮更新單擊的點以突出顯示它

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在這種情況下