如何避免ggiraph交互式绘图中点击时tooltip消失？

要实现点击交互式绘图元素后tooltip持续显示，仅靠delay_mouseout参数无法满足需求，需要结合自定义JavaScript代码和ggiraph的事件配置来实现，以下是完整的Shiny应用示例：

library(shiny)
library(ggplot2)
library(ggiraph)

ui <- fluidPage(
  girafeOutput("interactive_plot")
)

server <- function(input, output) {
  output$interactive_plot <- renderGirafe({
    # 创建带交互式点的ggplot
    p <- mtcars |> 
      ggplot(aes(x = wt, y = mpg)) +
      geom_point_interactive(
        aes(
          tooltip = rownames(mtcars),
          data_id = rownames(mtcars) # 给每个元素分配唯一ID，用于JS识别
        ),
        size = 3
      )
    
    # 配置ggiraph并添加自定义JS
    girafe(ggobj = p) |>
      opts_tooltip(
        css = "background-color: #f0f0f0; padding: 8px; border-radius: 4px; border: 1px solid #ccc;",
        delay_mouseout = 0 # 关闭默认延迟，由JS控制显示逻辑
      ) |>
      opts_hover(css = "cursor: pointer; fill: #ff7f0e;") |> # 悬停样式
      opts_js(code = "
        // 监听元素点击事件
        document.addEventListener('click', function(e) {
          const target = e.target;
          // 判断点击的是交互式绘图元素
          if (target.classList.contains('ggiraph-svg-element')) {
            const tooltip = document.querySelector('.ggiraph-tooltip');
            if (tooltip) {
              // 移除默认的hide定时器
              clearTimeout(tooltip.hideTimeout);
              // 强制tooltip保持显示
              tooltip.style.display = 'block';
              // 点击其他区域时隐藏tooltip
              document.addEventListener('click', function hideTooltip(e) {
                if (!target.contains(e.target) && !tooltip.contains(e.target)) {
                  tooltip.style.display = 'none';
                  document.removeEventListener('click', hideTooltip);
                }
              });
            }
          }
        });
      ")
  })
}

shinyApp(ui, server)

关键实现说明： #

• data_id参数：给每个交互式元素分配唯一标识，帮助JS精准识别点击对象
• 自定义JS逻辑：
  1. 监听页面点击事件，判断点击目标是否为ggiraph的交互式元素
  2. 找到tooltip元素，清除默认的隐藏定时器，强制设置tooltip为显示状态
  3. 添加辅助逻辑：点击其他区域时自动隐藏tooltip，避免界面混乱
• delay_mouseout = 0：关闭默认的tooltip延迟消失逻辑，完全由自定义JS控制显示行为

内容的提问来源于stack exchange，提问作者Bastián Olea Herrera