将 onclick 打开超链接事件添加到在 R 中创建的 html 小部件

Question

我希望能够做类似答案的事情，但不要使用 shiny。我还想绑定打开与数据点关联的超链接的 onclick 事件。

我正在使用htmlwidgets的saveWidget函数，并且知道我可以从htmltools中插入带有appendContent函数的javascript代码包。

下面是一个小示例代码：

library(ggplot2)
library(plotly)
library(htmlwidgets)
library(htmltools)
path.test.results <- "C:\Users\img\"
myData <- data.frame(x=c(1,2,3), y=c(3,2,1))
myLinks <- c("https://www.google.com/", "https://stackoverflow.com/", "https://www.r-project.org/")
ggp <- ggplot(data=myData, aes(x=x, y=y)) + geom_point()
ply <- plotly_build(ggp)
ply$elementId <- "PlotlyGraph"
#javascript <- HTML('<script>document.getElementById("htmlwidget_container").innerHTML = "test";</script>')
javascript <- HTML(paste(
        paste('<button type="button" onclick="document.getElementById(',"'", 'PlotlyGraph', "'", ').style.display=',
                "'", 'none', "'", '">Hide Plot</button>', sep=''),
        paste('<button type="button" onclick="document.getElementById(',"'", 'PlotlyGraph', "'", ').style.display=',
                "'", 'block', "'", '">Show Plot</button>', sep='')
        ,sep=''))
ply <- appendContent(ply, javascript)
saveWidget(widget=ply, file=paste(path.test.results, "test.html", sep=""), selfcontained = FALSE)
dev.off()

现在显然，我正在寻求帮助，以将正确的java脚本代码保存在"javascript"变量中，然后我可以将其与appendContent集成到html小部件中。

Answer 1

一种方法是

• 通过onStaticRenderComplete添加Javascript代码，以便在绘图渲染后执行它
• Javascript 事件是对此处示例的简单修改
• 通过window.open打开网址

有关具有不同跟踪的常规解决方案，请参阅：单击ggplot/plotly图表时打开超链接

完整代码

library(ggplot2)
library(plotly)
library(htmlwidgets)
library(htmltools)
path.test.results <- "C:\Users\img\"
myData <- data.frame(x=c(1,2,3), y=c(3,2,1), urls=c("https://www.google.com/", "http://stackoverflow.com/", "https://www.r-project.org/"))
myLinks <- c("https://www.google.com/", "http://stackoverflow.com/", "https://www.r-project.org/")
ggp <- ggplot(data=myData, aes(x=x, y=y)) + geom_point()
ply <- plotly_build(ggp)
ply$elementId <- "PlotlyGraph"
html <- HTML(paste(
  paste('<button type="button" onclick="document.getElementById(',"'", 'PlotlyGraph', "'", ').style.display=',
        "'", 'none', "'", '">Hide Plot</button>', sep=''),
  paste('<button type="button" onclick="document.getElementById(',"'", 'PlotlyGraph', "'", ').style.display=',
        "'", 'block', "'", '">Show Plot</button>', sep='')
  ,sep=''))
javascript <- HTML(paste("var myPlot = document.getElementById('PlotlyGraph');
myPlot.on('plotly_click', function(data){
var urls = ['", paste(myLinks, collapse = "', '"), "'];
window.open(urls[data.points[0].pointNumber],'_blank');
});", sep=''))
ply <- prependContent(ply, html)
ply <- prependContent(ply, onStaticRenderComplete(javascript))
saveWidget(widget=ply, file=paste(path.test.results, "test.html", sep=""), selfcontained = FALSE)

<</div> div class="one_answers">

对马克西米利安·彼得斯代码的轻微更正，对于一个因素(x(来说不太适合我。我不是Javascript程序员，所以无法真正解释它(也许有人可以？(，只是使用了情节示例。

(我在评论中添加了 2 行(

javascript <- HTML(paste("var myPlot = 
document.getElementById('PlotlyGraph');
                     myPlot.on('plotly_click', function(data){
                     var urls = ['", paste(myLinks, collapse = "', '"),'];//added
                     for(var i=0; i < data.points.length; i++){
                     window.open(urls[data.points[i].x],'_blank'); //changed
                     }//added
                     });", sep=''))