如何禁用对 Plotly-Object 的右键单击?
How to disable right-clicks on Plotly-Object?
我想在 Plotly 对象之上使用上下文菜单 (jQuery contextMenu)。
问题是,当我 select 使用 Box- 或 Lasso-select 工具然后对-点击一根柱子,它会触发那个柱子上的点击事件,并且之前的 selection 会丢失。
如何防止在 Plotly 对象上发生右键单击,因此只需单击左键即可触发 click/select 事件,而右键单击仅用于打开上下文菜单?
闪亮应用程序:
library(shiny)
library(ggplot2)
library(plotly)
dfN <- data.frame(
time_stamp = seq.Date(as.Date("2018-04-01"), as.Date("2018-07-30"), 1),
val = runif(121, 100,1000),
col = "green", stringsAsFactors = F
)
jsCode = HTML('
$(document).on("shiny:connected", function() {
$(function() {
$.contextMenu({
selector: "#plot",
callback: function(key, options) {
switch(key){
case "copy":
console.log("Contextmenu: Copy was clicked");
break;
case "paste":
console.log("Contextmenu: Paste was clicked");
break;
}
},
items: {
copy: {name: "copy", icon: "copy"},
"paste": {name: "paste", icon: "paste"}
}
});
});
});')
ui <- fluidPage(
tags$head(tags$script(src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.js")),
tags$head(tags$script(src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.ui.position.js")),
tags$head(tags$link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css")),
tags$head(tags$script(jsCode)),
plotlyOutput("plot")
)
server <- function(input, output, session) {
output$plot <- renderPlotly({
key <- highlight_key(dfN)
p <- ggplot() +
geom_col(data = key, aes(x = plotly:::to_milliseconds(time_stamp), y = val, fill=I(col)))
ggplotly(p, source = "Src") %>%
layout(xaxis = list(type = "date")) %>%
highlight(off = "plotly_doubleclick", on = "plotly_click", color = "blue",
opacityDim = 0.5, selected = attrs_selected(opacity = 1))
})
}
shinyApp(ui, server)
我找到了一个解决方案,它需要更改 plotly 包的基础 plotly.js
文件。
正常点击存储为 d.event.buttons = 1
,显然右键点击为 d.event.buttons = 2
。
因此在本节中;
graphDiv.on('plotly_click', function(d) {
});
我插入了一个 if 条件来检查 event.buttons
是否为 1,否则不会发出点击。
这适用于 plotly 的当前 CRAN 版本,开发版本现在有很大不同。
if (d.event.buttons == 1) {
// Normal Clicks
Shiny.setInputValue(
".clientValue-plotly_click-" + x.source,
JSON.stringify(eventDataWithKey(d))
);
graphDiv._shiny_plotly_click = d;
}
我想在 Plotly 对象之上使用上下文菜单 (jQuery contextMenu)。 问题是,当我 select 使用 Box- 或 Lasso-select 工具然后对-点击一根柱子,它会触发那个柱子上的点击事件,并且之前的 selection 会丢失。
如何防止在 Plotly 对象上发生右键单击,因此只需单击左键即可触发 click/select 事件,而右键单击仅用于打开上下文菜单?
闪亮应用程序:
library(shiny)
library(ggplot2)
library(plotly)
dfN <- data.frame(
time_stamp = seq.Date(as.Date("2018-04-01"), as.Date("2018-07-30"), 1),
val = runif(121, 100,1000),
col = "green", stringsAsFactors = F
)
jsCode = HTML('
$(document).on("shiny:connected", function() {
$(function() {
$.contextMenu({
selector: "#plot",
callback: function(key, options) {
switch(key){
case "copy":
console.log("Contextmenu: Copy was clicked");
break;
case "paste":
console.log("Contextmenu: Paste was clicked");
break;
}
},
items: {
copy: {name: "copy", icon: "copy"},
"paste": {name: "paste", icon: "paste"}
}
});
});
});')
ui <- fluidPage(
tags$head(tags$script(src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.js")),
tags$head(tags$script(src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.ui.position.js")),
tags$head(tags$link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css")),
tags$head(tags$script(jsCode)),
plotlyOutput("plot")
)
server <- function(input, output, session) {
output$plot <- renderPlotly({
key <- highlight_key(dfN)
p <- ggplot() +
geom_col(data = key, aes(x = plotly:::to_milliseconds(time_stamp), y = val, fill=I(col)))
ggplotly(p, source = "Src") %>%
layout(xaxis = list(type = "date")) %>%
highlight(off = "plotly_doubleclick", on = "plotly_click", color = "blue",
opacityDim = 0.5, selected = attrs_selected(opacity = 1))
})
}
shinyApp(ui, server)
我找到了一个解决方案,它需要更改 plotly 包的基础 plotly.js
文件。
正常点击存储为 d.event.buttons = 1
,显然右键点击为 d.event.buttons = 2
。
因此在本节中;
graphDiv.on('plotly_click', function(d) {
});
我插入了一个 if 条件来检查 event.buttons
是否为 1,否则不会发出点击。
这适用于 plotly 的当前 CRAN 版本,开发版本现在有很大不同。
if (d.event.buttons == 1) {
// Normal Clicks
Shiny.setInputValue(
".clientValue-plotly_click-" + x.source,
JSON.stringify(eventDataWithKey(d))
);
graphDiv._shiny_plotly_click = d;
}