如何使用R语言crosstalk包对同一变量应用两个过滤器？

问题现象 #

使用R的crosstalk、plotly和ggplot2包，尝试对数据框同一列（如mtcars$carb）拆分出两个复选框过滤器，单独选择其中一个过滤器的值时图表显示正常，但同时选择两个过滤器的值时，图表数据全部消失。期望实现同时选择两个过滤器的值时，显示符合任意一个条件的数据。

两种尝试方法均失败：

1. 拆分数据为两个SharedData对象，分别绘制图层
2. 使用单个总SharedData绘图，拆分数据生成两个过滤器

可复现代码（以第一种方法为例）：

# Libraries
library(plotly)
library(crosstalk)

# Prepare data and create shared data objects
mtcars_lowcarb_shared <-
  SharedData$new(mtcars[mtcars$carb < 4, ], group = "my_group")

mtcars_highcarb_shared <-
  SharedData$new(mtcars[mtcars$carb >= 4, ], group = "my_group")

# Make checkboxes
cb1 <- filter_checkbox(id = "lowcarb_selector",
                label = "Select among low carb values",
                sharedData = mtcars_lowcarb_shared,
                group = ~carb
                )

cb2 <- filter_checkbox(id = "highcarb_selector",
                label = "Select among high carb values",
                sharedData = mtcars_highcarb_shared,
                group = ~carb
                )

# Make plot
p <-
  ggplot(mapping = aes(x = hp, y = mpg, color = as.character(carb))) +
  geom_point(data = mtcars_lowcarb_shared) +
  geom_point(data = mtcars_highcarb_shared)

p <- ggplotly(p)

# Put it all together
bscols(list(cb1, cb2), p, widths = c(2, 10))

原因分析 #

crosstalk中同一group下的过滤器默认是**逻辑与（AND）**的关系。当同时选择低carb（<4）和高carb（>=4）的值时，要求数据同时满足两个互斥的条件，自然没有符合条件的数据，导致图表为空。

解决方案：实现逻辑或（OR）的过滤逻辑 #

要让两个过滤器的选择结果取逻辑或，需要自定义过滤逻辑。以下提供两种可行方法：

方法1：使用Shiny结合Reactive过滤（更直观） #

如果可以结合Shiny框架，能轻松实现自定义过滤逻辑：

library(shiny)
library(plotly)
library(ggplot2)

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      width = 2,
      checkboxGroupInput("lowcarb", "Select among low carb values",
                         choices = unique(mtcars$carb[mtcars$carb <4]),
                         selected = unique(mtcars$carb[mtcars$carb <4])),
      checkboxGroupInput("highcarb", "Select among high carb values",
                         choices = unique(mtcars$carb[mtcars$carb >=4]),
                         selected = unique(mtcars$carb[mtcars$carb >=4]))
    ),
    mainPanel(
      plotlyOutput("plot")
    )
  )
)

server <- function(input, output) {
  filtered_data <- reactive({
    selected_carb <- c(input$lowcarb, input$highcarb)
    mtcars[mtcars$carb %in% as.numeric(selected_carb), ]
  })
  
  output$plot <- renderPlotly({
    p <- ggplot(filtered_data(), aes(x = hp, y = mpg, color = as.character(carb))) +
      geom_point()
    ggplotly(p)
  })
}

shinyApp(ui, server)

方法2：纯Crosstalk结合自定义JavaScript（无需Shiny） #

通过filter_custom创建自定义过滤器，并用JavaScript实现OR逻辑：

library(crosstalk)
library(plotly)
library(ggplot2)
library(htmltools)

# 创建总SharedData对象
mtcars_shared <- SharedData$new(mtcars, group = "my_group")

# 自定义两个复选框控件
cb1 <- tags$div(
  tags$label("Select among low carb values"),
  tags$br(),
  lapply(unique(mtcars$carb[mtcars$carb <4]), function(x) {
    tags$div(
      tags$input(type = "checkbox", id = paste0("lowcarb_", x), value = x, checked = TRUE),
      tags$label(`for` = paste0("lowcarb_", x), x)
    )
  })
)

cb2 <- tags$div(
  tags$label("Select among high carb values"),
  tags$br(),
  lapply(unique(mtcars$carb[mtcars$carb >=4]), function(x) {
    tags$div(
      tags$input(type = "checkbox", id = paste0("highcarb_", x), value = x, checked = TRUE),
      tags$label(`for` = paste0("highcarb_", x), x)
    )
  })
)

# 创建自定义过滤器
custom_filter <- filter_custom(
  id = "or_filter",
  sharedData = mtcars_shared,
  column = ~carb,
  filter = JS('function(values, data) {
    // 获取两个复选框的选中值
    const lowChecked = Array.from(document.querySelectorAll("[id^=lowcarb_]:checked")).map(el => parseInt(el.value));
    const highChecked = Array.from(document.querySelectorAll("[id^=highcarb_]:checked")).map(el => parseInt(el.value));
    const allSelected = lowChecked.concat(highChecked);
    // 返回符合任意选中值的数据
    return data.filter(d => allSelected.includes(d.carb));
  }')
)

# 绘制图表
p <- ggplot(mtcars_shared, aes(x = hp, y = mpg, color = as.character(carb))) +
  geom_point()
p <- ggplotly(p)

# 组合页面
bscols(list(cb1, cb2, custom_filter), p, widths = c(2, 10))

说明 #

• 方法1借助Shiny的响应式机制，直接合并两个复选框的选中值进行过滤，逻辑清晰易维护。
• 方法2纯前端实现，无需Shiny依赖，适合静态HTML文档场景。

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