在ggplot/plotly图表上单击以打开超链接 [英] Open hyperlink on click on an ggplot/plotly chart

问题描述

这是为

This is a follow up question on the answer provided for Add onclick open hyperlink event to an html widget created in R. Consider the following example:

library(ggplot2)
library(plotly)
library(htmlwidgets)
library(htmltools)
myData <- data.frame(
  x=c(1,2,3), 
  y=c(3,2,1),
  label=c("Google", "Bing", "R"),
  category=c("search", "search", "other"),
  urls=c("http://google.de", "http://bing.com", "http://r-project.org")
)

f <- function(p) {
  ply <- ggplotly(p)
  javascript <- HTML(paste("
   var myPlot = document.getElementById('", ply$elementId, "');
   myPlot.on('plotly_click', function(data){
   var urls = ['", paste(myData$urls, collapse = "', '"), "'];
   window.open(urls[data.points[0].pointNumber],'_blank');
   });", sep=''))  
  prependContent(ply, onStaticRenderComplete(javascript))
}

这可以按预期工作-在任意点上单击都会打开相应的网址:

This works as expected - a click on any point opens the corresponding url:

f(ggplot(myData, aes(x=x, y=y)) + geom_point(aes(text=label)))

这无法正常工作-索引不再匹配:

This does not work as expected - the indices do not match anymore:

f(ggplot(myData, aes(x=x, y=y)) + geom_point(aes(text=label, color=category)))

plotly对象有所不同，似乎pointNumber不再拥有所有点的绝对索引，而是(颜色)分组中的索引.

The plotly objects differ and it seems as if pointNumber does not hold the absolute index of all points any more, but the index within a (color) grouping.

是否有关于如何修改示例的想法，以便它也可以与颜色/填充分组一起用于一般用例?

Any ideas on how to adapt the example so that it works for general use cases also with color/fill groupings?

推荐答案

• plotly_click事件提供数据跟踪的名称.
• data是点击事件信息
• data.points[0].data.name是跟踪/类别名称
• The plotly_click event provides the name of the data trace.
• data is the click event information
• data.points[0].data.name is the trace/category name

我们可以通过category对其进行拆分(就像aes一样)，而不是传递经过展平的数据帧，然后传递给我们的JavaScript函数

Instead of passing the flattened data frame we can split it by category (just like aes does) and pass into our JavaScript function

var urls = ", toJSON(split(myData, myData$category)), ";

哪个为我们提供了以下JSON

Which gives us the following JSON

{"other": [{"x":3,"y":1,"label":"R","category":"other","urls":"http://r-project.org"}],
 "search":[{"x":1,"y":3,"label":"Google","category":"search","urls":"http://google.de"},
           {"x":2,"y":2,"label":"Bing","category":"search","urls":"http://bing.com"}]
} 

然后通过以下方式检索URL

The URL is then retrieved by

window.open(urls[data.points[0].data.name][data.points[0].pointNumber]['urls'],'_blank');

即从提供的JSON中获取:我们从单击(data.points[0])的第一个(也是唯一一个)点开始，获取跟踪的名称(data.name)及其pointNumber(即跟踪中的第n个点)

i.e. from the provided JSON: we take from the first (and only) point which was clicked on (data.points[0]) the name of the trace (data.name) and its pointNumber (i.e. the n-th point in the trace).

完整代码

library(ggplot2)
library(plotly)
library(htmlwidgets)
library(htmltools)
library(jsonlite)

myData <- data.frame(
  x=c(1,2,3), 
  y=c(3,2,1),
  label=c("Google", "Bing", "R"),
  category=c("search", "search", "other"),
  urls=c("http://google.de", "http://bing.com", "http://r-project.org")
)

f <- function(p) {
  ply <- ggplotly(p)

  javascript <- HTML(paste("
                           var myPlot = document.getElementById('", ply$elementId, "');
                           myPlot.on('plotly_click', function(data){
                           var urls = ", toJSON(split(myData, myData$category)), ";
                           window.open(urls[data.points[0].data.name][data.points[0].pointNumber]['urls'],'_blank');
                           });", sep=''))  
  prependContent(ply, onStaticRenderComplete(javascript))
}

f(ggplot(myData, aes(x=x, y=y)) + geom_point(aes(text=label, color=category)))

这篇关于在ggplot/plotly图表上单击以打开超链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！