从情节上的任何地方情节地单击事件 [英] plotly click events from anywhere on the plot

问题描述

我是 r-plotly 的新手，并试图弄清楚如何处理不在数据上的点击.似乎使用 event_data("plotly_click") 我从数据中获得了点上的事件，但到目前为止还没有弄清楚如何对不接近数据的点击执行此操作，但是就在情节的白色部分.

来自绘图的闪亮点击事件可以做到这一点，我只得到点击的 x 和 y.我想要类似的，但为了情节.

我可以指定来自情节图上任何地方的点击事件，而不仅仅是数据吗?

令人惊讶的是，这在情节中还不存在.查看此功能请求

---

这是使用 plotlyProxy 而不是重新渲染的相同方法 - 偏移更糟:

图书馆(情节)图书馆(闪亮)图书馆(htmlwidgets)ui <-流体页面(plotlyOutput("myPlot"),逐字文本输出(点击"))服务器 <- 功能(输入，输出，会话){js <- "函数(el，x，输入名称){var id = el.getAttribute('id');var gd = document.getElementById(id);var d3 = Plotly.d3;Plotly.plot(id).then(attach);函数附加(){var xaxis = gd._fullLayout.xaxis;var yaxis = gd._fullLayout.yaxis;var l = gd._fullLayout.margin.l;var t = gd._fullLayout.margin.t;var 坐标 = [null, null]gd.addEventListener('click', function(evt) {var 坐标 = [xaxis.p2c(evt.x - l), yaxis.p2c(evt.y - t)];Shiny.setInputValue(inputName,坐标);});};}"clickposition_history <-reactiveVal(data.frame(x = NA, y = NA))观察事件(输入$点击位置，{clickposition_history(rbind(clickposition_history()，输入$clickposition))})output$myPlot <- renderPlotly({plot_ly(data.frame(x = NA, y = NA), x = ~x, y = ~y, type = "scatter", mode = "markers") %>%onRender(js, data = "clickposition")})myPlotProxy <- plotlyProxy("myPlot", session)观察({plotlyProxyInvoke(myPlotProxy, restyle", list(x = list(clickposition_history()$x), y = list(clickposition_history()$y)))})output$click <- renderPrint({clickposition_history()})}闪亮应用程序(用户界面，服务器)

相关 GitHub issue 和 PR.

I am new to r-plotly and trying to figure out how to handle clicks which are not on the data. It seems that using event_data("plotly_click") I get events that are on points from the data, but so far have not figured out how to do this for clicks which are not close to the data, but just on the white part of the plot.

Shiny click events from plots can do this and I just get the x and y of the click. I want similar, but for plotly plots.

Can I specify click events to be from anywhere on the plotly plot, not just on the data?

EDIT: Surprisingly this does not exist yet in plotly. See this feature request

https://github.com/plotly/plotly.js/issues/2696

https://github.com/ropensci/plotly/issues/1194

So until this feature is added, I guess my question is what options are there to do this? Seems like such a basic feature, that I hope someone with more knowledge of JavaScript/Shiny/Plotly has hacked into.

解决方案

Please check the following workaround based on this codepen I found via this question.

However, there is a small horizontal offset I couldn't get rid of so far - maybe someone knows how to fix it?

library(plotly)
library(shiny)
library(htmlwidgets)

ui <- fluidPage(
  plotlyOutput("graph"),
  verbatimTextOutput("click")
)

server <- function(input, output, session) {
  
  js <- "
    function(el, x, inputName){
      var id = el.getAttribute('id');
      var gd = document.getElementById(id);
      var d3 = Plotly.d3;
      Plotly.plot(id).then(attach);
        function attach() {
          var xaxis = gd._fullLayout.xaxis;
          var yaxis = gd._fullLayout.yaxis;
          var l = gd._fullLayout.margin.l;
          var t = gd._fullLayout.margin.t;
          var coordinates = [null, null]
    
          gd.addEventListener('click', function(evt) {
            var coordinates = [xaxis.p2c(evt.x - l), yaxis.p2c(evt.y - t)];
            Shiny.setInputValue(inputName, coordinates);
          });
        };
  }
  "
  clickposition_history <- reactiveVal(data.frame(x = 1:10, y = 1:10))
  
  observeEvent(input$clickposition, {
    clickposition_history(rbind(clickposition_history(), input$clickposition))
  })
  
  output$graph <- renderPlotly({
      plot_ly(clickposition_history(), x = ~x, y = ~y, type = "scatter", mode = "markers") %>%
      onRender(js, data = "clickposition")
  })
  
  output$click <- renderPrint({
    input$clickposition
  })
}

shinyApp(ui, server)

---

Edit:

Here is the same approach using plotlyProxy instead of re-rendering - the offset is even worse:

library(plotly)
library(shiny)
library(htmlwidgets)

ui <- fluidPage(
  plotlyOutput("myPlot"),
  verbatimTextOutput("click")
)

server <- function(input, output, session) {
  
  js <- "
    function(el, x, inputName){
      var id = el.getAttribute('id');
      var gd = document.getElementById(id);
      var d3 = Plotly.d3;
      Plotly.plot(id).then(attach);
        function attach() {
          var xaxis = gd._fullLayout.xaxis;
          var yaxis = gd._fullLayout.yaxis;
          var l = gd._fullLayout.margin.l;
          var t = gd._fullLayout.margin.t;
          var coordinates = [null, null]

          gd.addEventListener('click', function(evt) {
            var coordinates = [xaxis.p2c(evt.x - l), yaxis.p2c(evt.y - t)];
            Shiny.setInputValue(inputName, coordinates);
          });
        };
  }
  "
  clickposition_history <- reactiveVal(data.frame(x = NA, y = NA))
  
  observeEvent(input$clickposition, {
    clickposition_history(rbind(clickposition_history(), input$clickposition))
  })
  
  output$myPlot <- renderPlotly({
    plot_ly(data.frame(x = NA, y = NA), x = ~x, y = ~y, type = "scatter", mode = "markers") %>%
      onRender(js, data = "clickposition")
  })
  
  myPlotProxy <- plotlyProxy("myPlot", session)
  
  observe({
    plotlyProxyInvoke(myPlotProxy, "restyle", list(x = list(clickposition_history()$x), y = list(clickposition_history()$y)))
  })
  
  output$click <- renderPrint({
    clickposition_history()
  })
}

shinyApp(ui, server)

Related GitHub issue and PR.

这篇关于从情节上的任何地方情节地单击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！