【问题标题】:plotly including multiple hyperlinks in text在文本中巧妙地包含多个超链接
【发布时间】:2022-12-03 13:51:07
【问题描述】:

有没有办法将鼠标悬停在 plotly 图中的数据上,然后能够单击文本中的超链接选项?

有许多问题(例如,herehere)允许用户单击一个点并将您带到与该点关联的 url,但在这些解决方案中,它仅限于一个 url。例如:

library(ggplot2)
library(plotly)
library(htmlwidgets)
mydata <- data.frame( xx = c(1, 2),  yy = c(3, 4),
  website = c("https://www.google.com",
              "https://www.r-project.org/"),
  link = c(
    "https://www.google.com",
    "https://www.r-project.org/"))


g <- ggplot(mydata, aes(x = xx, y = yy, 
                        text = paste0("xx: ", xx, "\n",
                                      "website link: ", website),
                        customdata = link)) +
  geom_point()
g
p <- ggplotly(g, tooltip = c("text"))
p
onRender(
  p, "
  function(el) {
    el.on('plotly_click', function(d) {
      var url = d.points[0].customdata;
      window.open(url);
    });
  }
"
)

然后你可以点击第二个点,它会带你到https://www.r-project.org/

我想要的是能够在两个或多个链接之间进行选择(即单击文本框中的超链接):

mydata <- data.frame( xx = c(1, 2),  yy = c(3, 4),
                      website = c("https://www.google.com",
                                  "https://www.r-project.org/),
                      website2 = c(" https://www.reddit.com/", 
                                   "http://stackoverflow.com/"),
                      link = c(
                        "https://www.google.com, https://www.reddit.com/",
                        "https://www.r-project.org/, http://stackoverflow.com/"))


g <- ggplot(mydata, aes(x = xx, y = yy, 
                        text = paste0("xx: ", xx, "\n",
                                      "website link: ", website, "\n",
                                      "Second website: ", website2),
                        customdata = link)) +
  geom_point()
g
p <- ggplotly(g, tooltip = c("text"))
p

我感觉这无法通过 textplotlytooltip 实现,但也许有不同的解决方法,例如使用javascript(我不熟悉)。

有任何想法吗?

谢谢

【问题讨论】:

  • 您可以在悬停框中放置一个链接,但问题是您将无法单击它,因为只要您不再悬停该点,该框就会消失。
  • 所以你不认为有任何聪明的解决方法吗?也许唯一的选择是将绘图包含在闪亮的应用程序中,并通过单击其中的一个点来打开/过滤带有不同面板中超链接列表的表格......
  • 我刚刚用谷歌搜索,但一无所获。我也尝试了 plot_doubleclick 事件,但它不起作用。事实上,这在 Shiny 中是可行的。

标签: javascript r ggplot2 plotly ggplotly


【解决方案1】:

这是一种方法闪亮的:

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

mydata <- data.frame(
  xx = c(1, 2),  
  yy = c(3, 4),
  website = c("https://www.google.com/",
              "https://www.r-project.org/"),
  website2 = c("https://www.reddit.com/", 
               "http://stackoverflow.com/"),
  link = I(list(
    list("https://www.google.com", "https://www.reddit.com/"),
    list("https://www.r-project.org/", "http://stackoverflow.com/")
  ))
)

g <- ggplot(
  mydata, 
  aes(
    x = xx, 
    y = yy, 
    text = paste0(
      "xx: ", xx, "
",
      "website link: ", website, "
",
      "Second website: ", website2
    ),
    customdata = link
  )) +
  geom_point()
p <- ggplotly(g, tooltip = c("text")) %>% onRender(
  "function(el) {
    el.on('plotly_click', function(d) {
      var urls = d.points[0].customdata;
      Shiny.setInputValue('urls', urls);
    });
  }"
)


ui <- fluidPage(
  plotlyOutput("plotly")
)

server <- function(input, output, session) {
  
  output[["plotly"]] <- renderPlotly({
    p
  })
  
  observeEvent(input[["urls"]], {
    url1 <- input[["urls"]][1]
    url2 <- input[["urls"]][2]
    showModal(modalDialog(
      tags$div(
        tags$a(href = url1, "First link"),
        tags$br(),
        tags$a(href = url2, "Second link")
      )
    ))
  })
  
}

shinyApp(ui, server)

【讨论】:

    【解决方案2】:

    这是一种没有的方法闪亮的, 使用查询用户界面图书馆:

    library(plotly)
    library(htmlwidgets)
    library(htmltools)
    
    dep <- htmlDependency(
      name = "jquery-ui",
      version = "1.13.2",
      src = c(href = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2"),
      script = "jquery-ui.min.js",
      stylesheet = "themes/base/jquery-ui.min.css"
    )
    
    
    mydata <- data.frame(
      xx = c(1, 2),  
      yy = c(3, 4),
      website = c("https://www.google.com/",
                  "https://www.r-project.org/"),
      website2 = c("https://www.reddit.com/", 
                   "http://stackoverflow.com/"),
      link = I(list(
        list("https://www.google.com", "https://www.reddit.com/"),
        list("https://www.r-project.org/", "http://stackoverflow.com/")
      ))
    )
    
    g <- ggplot(
      mydata, 
      aes(
        x = xx, 
        y = yy, 
        text = paste0(
          "xx: ", xx, "
    ",
          "website link: ", website, "
    ",
          "Second website: ", website2
        ),
        customdata = link
      )) +
      geom_point()
    p <- ggplotly(g, tooltip = c("text")) %>% onRender(
      "function(el) {
        el.on('plotly_click', function(d) {
          var urls = d.points[0].customdata;
          $div = $('<div><p><a href="' + urls[0] + '">First link</a></p><p><a href="' + urls[1] + '">Second link</a></p></div>');
          $div.dialog({
            autoOpen: false,
            show: {effect: 'blind', duration: 1000},
            hide: {effect: 'explode', duration: 1000}
          });
          $div.dialog('open');
        });
      }"
    )
    deps <- c(p$dependencies, list(dep))
    p$dependencies <- deps
    
    p
    

    使用SweetAlert2图书馆:

    library(shiny)
    library(plotly)
    library(htmlwidgets)
    library(htmltools)
    
    dep <- htmlDependency(
      name = "sweetalert2",
      version = "11.6.15",
      src = c(href = "https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.6.15"),
      script = "sweetalert2.all.min.js"
    )
    
    
    mydata <- data.frame(
      xx = c(1, 2),  
      yy = c(3, 4),
      website = c("https://www.google.com/",
                  "https://www.r-project.org/"),
      website2 = c("https://www.reddit.com/", 
                   "http://stackoverflow.com/"),
      link = I(list(
        list("https://www.google.com", "https://www.reddit.com/"),
        list("https://www.r-project.org/", "http://stackoverflow.com/")
      ))
    )
    
    g <- ggplot(
      mydata, 
      aes(
        x = xx, 
        y = yy, 
        text = paste0(
          "xx: ", xx, "
    ",
          "website link: ", website, "
    ",
          "Second website: ", website2
        ),
        customdata = link
      )) +
      geom_point()
    p <- ggplotly(g, tooltip = c("text")) %>% onRender(
      "function(el) {
        el.on('plotly_click', function(d) {
          var urls = d.points[0].customdata;
          var html = '<div><p>' + 
            '<a href="' + urls[0] + '" target="_blank">First link</a>' +
            '</p><p>' + 
            '<a href="' + urls[1] + '" target="_blank">Second link</a>' + 
            '</p></div>';
          Swal.fire({
            title: 'Links',
            html: html
          });
        });
      }"
    )
    deps <- c(p$dependencies, list(dep))
    p$dependencies <- deps
    
    p
    


    更时尚:

    library(shiny)
    library(plotly)
    library(htmlwidgets)
    library(htmltools)
    
    dep <- htmlDependency(
      name = "sweetalert2",
      version = "11.6.15",
      src = c(href = "https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.6.15"),
      script = "sweetalert2.all.min.js"
    )
    
    
    mydata <- data.frame(
      xx = c(1, 2),  
      yy = c(3, 4),
      link = I(list(
        list(
          list(title = "Google", url = "https://www.google.com"), 
          list(title = "Reddit", url = "https://www.reddit.com/")
        ),
        list(
          list(title = "R project", url = "https://www.r-project.org/"), 
          list(title = "StackOverflow", url = "http://stackoverflow.com/")
        )
      ))
    )
    
    g <- ggplot(
      mydata, 
      aes(
        x = xx, 
        y = yy, 
        text = paste0("xx: ", xx),
        customdata = link
      )) +
      geom_point()
    p <- ggplotly(g, tooltip = c("text")) %>% onRender(
      "function(el) {
        el.on('plotly_click', function(d) {
          var urls = d.points[0].customdata;
          var html = '<hr/><div><p>' + 
            '<a href="' + urls[0].url + '" target="_blank">' + 
              urls[0].title + 
            '</a>' +
            '</p><p>' + 
            '<a href="' + urls[1].url + '" target="_blank">' + 
              urls[1].title +
            '</a>' + 
            '</p></div>';
          Swal.fire({
            title: '<strong>Links</strong>',
            html: html
          });
        });
      }"
    )
    deps <- c(p$dependencies, list(dep))
    p$dependencies <- deps
    
    p
    

    【讨论】:

    • 这三个解决方案都很好,谢谢!一旦我通过它们,我会接受一个!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-04-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-06-10
    • 1970-01-01
    相关资源
    最近更新 更多