javascript - 通过单击堆叠的条形图打开选项卡
问题描述
我正在使用 R、ggplot 和 plotly 构建一个包含转发的堆叠条形图。如果单击条形图的一部分,我希望打开一个新的浏览器选项卡并显示来自该特定日期的推文以及指定的转发数量。但是,当我单击下面示例中的其中一个栏时,会打开一个不同的链接,这表明 url 没有与这些栏正确连接。我该如何解决这个问题?
我以前从未工作过,甚至从未见过 JavaScript,所以答案很可能就在那里。该情节最终将出现在 Shiny 应用程序中。
library(rtweet)
library(ggplot2)
library(plotly)
# Get tweets
tweets <- get_timeline("BBC", n = 10)
# Create dataframe
data <- data.frame("retweet_count" = tweets$retweet_count,
"week" = c(1,1,1,2,2,3,4,5,5,6),
"url" = tweets$status_url)
# Create ggplot
ggplot(data = data,
aes(x = week,
y = retweet_count,
label = url)) +
geom_bar(stat = 'sum',
fill = "darkblue")
# Convert to plotly
p <- ggplotly(
p,
tooltip = c("y", 'label'))
# Add URL data to plot
p$x$data[[1]]$customdata <- data$url
# JS function to make a tab open when clicking on a specific bar
onRender(
p,
"
function(el,x){
el.on('plotly_click', function(d) {
var websitelink = d.points[0].customdata;
window.open(websitelink);
});
}
")
解决方案
我没有 Twitter 帐户,所以我更改了您的数据集以使用一些 Wikipedia 文章。
您的问题可以通过data.frame
根据 URL 重新排序来解决。如果您使用来自所有内容的文章运行以下内容,则1:9
可以按预期工作。一旦您切换到带有链接的数据集,9:1
您将获得错误的链接。Plotly 似乎在内部重新排序 - 与此处相同的逻辑。
在您的情况下:data <- data[order(data$url),]
应该修复订单。
以下工作正常:
# library(rtweet)
library(ggplot2)
library(plotly)
library(htmlwidgets)
# Get tweets
# tweets <- get_timeline("BBC", n = 10)
# Create dataframe
# data <- data.frame("retweet_count" = tweets$retweet_count,
# "week" = c(1,1,1,2,2,3,4,5,5,6),
# "url" = tweets$status_url)
# Create dataframe
# Works!
data <- data.frame("retweet_count" = 1:9,
"week" = 1:9,
"url" = paste0(c("https://en.wikipedia.org/wiki/166"), 1:9))
# Doesn't work!
# data <- data.frame("retweet_count" = 9:1,
# "week" = 9:1,
# "url" = paste0(c("https://en.wikipedia.org/wiki/166"), 9:1))
# Create ggplot
p <- ggplot(data = data,
aes(x = week,
y = retweet_count,
label = url)) +
geom_bar(stat = 'sum',
fill = "darkblue")
# Convert to plotly
p <- ggplotly(
p,
tooltip = c("y", 'label'))
# Add URL data to plot
p$x$data[[1]]$customdata <- data$url
# JS function to make a tab open when clicking on a specific bar
onRender(
p,
"
function(el,x){
el.on('plotly_click', function(d) {
var websitelink = d.points[0].customdata;
window.open(websitelink);
});
}
")
推荐阅读
- angular - Angular 中的二进制输入验证器(TypeScript)
- ssms - SQL Server Management Studio 安装期间出现致命错误 0x80070643
- robotframework - 如何将查询结果打印到控制台 | 机器人框架
- php - PHP for 循环仅每两行有效
- statistics - 如何在 Julia 中操作数据框时使用条件
- reactjs - 使用带有 React Js 的“Unstated”从 API 端点获取数据
- authentication - 使用 azure 广告身份验证时抛出异常 AADSTS50011
- mysql - phpmyadmin 中使用少量 INNER JOIN 的 504 超时网关问题
- ios - 找不到目标“arm64-apple-ios-simulator”的模块“Alamofire”;找到:x86_64-apple-ios-simulator,x86_64
- azure - 微软在 azure devops 中托管的 ubuntu 代理中是否允许使用端口 9000