无需Shiny：如何在ggiraph中实现按名称选择数据点功能？

可以实现这个需求，不需要依赖Shiny应用或者实时R会话。ggiraph生成的是独立的HTML Widget，我们可以通过嵌入自定义的HTML选择框和JavaScript逻辑，来模拟plotly的selectize高亮功能。

完整实现代码 #

library(ggiraph)
library(dplyr)

# 准备数据，提取唯一的鸡只名称用于选择框
chick_names <- ChickWeight %>% distinct(Chick) %>% pull(Chick)

# 构建基础交互式图形
p <- ggplot(ChickWeight, aes(x = Time, y = weight,
                             colour = Diet, group = Chick,
                             tooltip = Chick, data_id = Chick)) +
  geom_line_interactive() + 
  geom_point_interactive()

# 生成带选择框的ggiraph图形
girafe(ggobj = p) %>%
  girafe_options(
    # 添加自定义工具栏元素：选择框
    opts_toolbar(
      custom_toolbar = htmltools::tags$div(
        htmltools::tags$label("选择鸡只："),
        htmltools::tags$select(
          id = "chick-select",
          # 添加默认选项
          htmltools::tags$option(value = "", "全部"),
          # 生成鸡只选项
          lapply(chick_names, function(nm) {
            htmltools::tags$option(value = nm, nm)
          })
        )
      )
    ),
    # 自定义悬停样式保持一致
    opts_hover_inv = opts_hover_inv(css = "opacity:0.1;")
  ) %>%
  # 添加JavaScript逻辑处理选择事件
  htmlwidgets::onRender("
    function(el, x) {
      // 获取选择框元素
      const selectEl = document.getElementById('chick-select');
      // 监听选择变化
      selectEl.addEventListener('change', function() {
        const selectedId = this.value;
        // 获取所有图形元素
        const allElements = el.querySelectorAll('[data-id]');
        
        if (selectedId === '') {
          // 选择全部时恢复所有元素样式
          allElements.forEach(el => {
            el.style.opacity = '1';
          });
        } else {
          // 高亮选中的元素，淡化其他元素
          allElements.forEach(el => {
            if (el.getAttribute('data-id') === selectedId) {
              el.style.opacity = '1';
            } else {
              el.style.opacity = '0.1';
            }
          });
        }
      });
    }
  ")

代码说明 #

• 选择框生成：从ChickWeight数据中提取唯一的鸡只名称，动态生成选择框的选项，同时保留“全部”选项用于恢复视图。
• JavaScript逻辑：监听选择框的change事件，根据选中的鸡只ID，通过修改元素的opacity样式来实现高亮/淡化效果，和ggiraph自带的悬停淡化逻辑保持一致。
• 独立性：生成的HTML Widget可以直接保存为HTML文件（用htmlwidgets::saveWidget()），无需依赖Shiny服务器或实时R会话，直接在浏览器中打开即可使用。

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