R中ggplot2转Plotly分面图点击点位跳转URL失效问题

使用ggplot2绘制图形后转换为Plotly对象，通过R Markdown输出为html文件，需要编写JS函数实现点击图表点位打开对应关联URL的功能。
使用分面（facetting）后，常规非分面场景的点击跳转方案全部失效，已测试过两类公开的实现逻辑，均因为分面后点位顺序变化无法匹配到正确URL。
初始测试代码如下：

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

myData <- data.frame(x=c(1,2,3, 4, 6), y=c(3,2,1, 5, 4), type = c("a", "b", "c", "a", "b"), urls=c("https://www.example1.com/", "https://www.example2.com/", "https://www.example3.com/", "https://www.example4.com/", "https://www.example5.com/"))

ggp <- ggplot(data=myData, aes(x=x, y=y)) +
              geom_point() +
              facet_wrap(type ~ .)
ply <- plotly_build(ggp)

ply$elementId <- "PlotlyGraph"

# 非分面场景可用，分面后索引错位失效
# javascript <- HTML(paste("var myPlot = document.getElementById('PlotlyGraph');
# myPlot.on('plotly_click', function(data){
# var urls = ['", paste(myData$urls, collapse = "', '"), "'];
# window.open(urls[data.points[0].pointNumber],'_blank');
# });", sep=''))

# 按分组拆分URL的试错方案，仍因排序规则不匹配失效
javascript <- HTML(paste("var myPlot = document.getElementById('PlotlyGraph');
                     myPlot.on('plotly_click', function(data){
                     var urls = ", toJSON(split(myData, myData$type)), ";
                     window.open(urls[data.points[0].data.name][data.points[0].pointNumber]['urls'],'_blank')
                     });", sep=''))


ply <- prependContent(ply, onStaticRenderComplete(javascript))

ply

问题本质是ggplot生成分面后的数据分组、排序规则，和JS侧读取点位索引的预期逻辑不匹配，硬靠索引映射URL的思路容错性极低。

不要在JS侧硬编码URL数组做索引匹配，直接把URL作为自定义属性写入Plotly每个轨迹的点位数据中，点击时直接读取当前点位绑定的URL即可，完全不受分面排序、数据顺序变动的影响。

完整代码 #

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

myData <- data.frame(x=c(1,2,3, 4, 6), y=c(3,2,1, 5, 4), 
                     type = c("a", "b", "c", "a", "b"), 
                     urls=c("https://www.example1.com/", "https://www.example2.com/", 
                            "https://www.example3.com/", "https://www.example4.com/", 
                            "https://www.example5.com/"))

ggp <- ggplot(data=myData, aes(x=x, y=y)) +
  geom_point() +
  facet_wrap(type ~ .)
ply <- plotly_build(ggp)
ply$elementId <- "PlotlyGraph"

# 遍历每个分面对应的Plotly轨迹，绑定对应URL到customdata字段
for(i in seq_along(ply$x$data)){
  current_trace <- ply$x$data[[i]]
  # 匹配当前轨迹对应的分面分组
  facet_group <- current_trace$name
  group_subset <- myData[myData$type == facet_group, ]
  # 按轨迹内点位顺序写入URL到customdata
  current_trace$customdata <- group_subset$urls
}

# JS逻辑直接读取当前点击点位的customdata，无需索引匹配
javascript <- HTML('
var myPlot = document.getElementById("PlotlyGraph");
myPlot.on("plotly_click", function(data){
  const targetUrl = data.points[0].customdata;
  window.open(targetUrl, "_blank");
});
')

ply <- prependContent(ply, onStaticRenderComplete(javascript))
ply

逻辑说明 #

• plotly_build转换带分面的ggplot对象时，会为每个分面单独生成一条轨迹（trace），轨迹的name属性就是对应分面的分组值
• 遍历每条轨迹时，直接从原始数据中筛选对应分组的URL，按轨迹内点位的排列顺序写入Plotly原生支持的customdata自定义字段，渲染时该字段会直接透传到前端点位对象上
• 点击事件触发时，直接从被点击的点位对象上读取提前绑定好的customdata值作为跳转地址，不需要做任何索引计算或顺序匹配，无论分面排序、数据顺序怎么调整都不会出现URL匹配错误
• 该方案同时兼容facet_wrap、facet_grid两类分面方式，也支持散点、折线、柱状图等多种常见geom类型的点击跳转

提示：如果绘图时额外设置了颜色、形状等分组映射，只需要调整轨迹和原始数据的匹配字段即可，核心的customdata绑定逻辑不需要改动。

内容的提问来源于stack exchange，提问作者User2321