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

问题描述

这是为

这不能按预期工作 - 索引不再匹配:

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

情节对象不同，似乎 pointNumber 不再保存所有点的绝对索引，而是(颜色)分组内的索引.

关于如何调整示例使其适用于一般用例以及颜色/填充分组的任何想法?

解决方案

• plotly_click 事件提供数据跟踪的名称.
• data为点击事件信息
• data.points[0].data.name 是跟踪/类别名称

我们可以通过 category (就像 aes 所做的那样)将其拆分并传递给我们的 JavaScript 函数

，而不是传递展平的数据框

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

这给了我们以下 JSON

{其他":[{x":3，y":1，标签":R"，类别":其他"，"urls":"http://r-project.org"}],搜索":[{x":1，y":3，标签":Google"，类别":搜索"，网址":http://google.de"},{x":2，y":2，标签":必应"，类别":搜索"，网址":http://bing.com"；}]}

然后由

检索 URL

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

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

---

完整代码

库(ggplot2)图书馆(情节)图书馆(htmlwidgets)库(htmltools)库(jsonlite)myData <- data.frame(x=c(1,2,3),y=c(3,2,1),标签=c(谷歌"，必应"，R")，类别=c(搜索"，搜索"，其他")，urls=c(http://google.de", http://bing.com", http://r-project.org"))f <-函数(p){ply <- ggplotly(p)javascript <- HTML(粘贴("var myPlot = document.getElementsByClassName('js-plotly-plot')[0];myPlot.on('plotly_click'，函数(数据){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)))

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)))

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?

解决方案

• 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

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)), ";
                       

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"}]
} 

The URL is then retrieved by

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

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).

---

Complete code

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.getElementsByClassName('js-plotly-plot')[0];
                           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屋！