如何在 R 中的 Crosstalk() 中的 filter_select() 中设置默认值 - Plotly

Question

我正在开发一个带有基于绘图的交互式图表的 rmarkdown HTML。虽然我可以完成图表中我想要的所有内容，但 crosstalk() 中的 filter_select() 不允许我在其中设置默认值。因此，我的图表在初始加载期间看起来笨拙且糟糕。

通过 R 中的串扰使用选择框在 R 绘图中选择默认值，使用静态 html 不闪亮

上面的讨论有一些输入，但我不知道如何在 crosstalk() 中进行这些编辑，因为我不熟悉 HTML/JavaScript。

Answer 1

借用链接问题中的示例，您可以得到以下内容作为初学者：

---
output:
  html_document
---

```{r echo=FALSE, message=FALSE, warning=FALSE}


library(plotly)
# example data 
dat <- tibble::tribble(~filterBy, ~x, ~y,
                    "a", 1, 1,
                    "b", 2, 1,
                    "a", 1, 2,
                    "b", 2, 2,
                    "a", 1, 3,
                    "b", 2, 3,
                    "a", 1, 2,
                    "b", 2, 3,
                    "c", 3, 1,
                    "c", 3, 2,
                    "c", 3, 3
                    )  

# initializing a crosstalk shared data object  
plotdat <- highlight_key(dat)

# Filter dropdown
question_filter <- crosstalk::filter_select(
   "filter", "Select a group to examine",
   plotdat, ~filterBy, multiple = F
)

# Plotting:
plot <-  plot_ly( plotdat, 
    x = ~x, y = ~y, text = ~filterBy,  mode = "markers+text", 
    textposition = "top", hoverinfo = "x+y"
  )
```

您可以将接受的答案中的 js 粘贴到 r 代码末尾下方，就像您{r}在第一个块下面创建一个新块一样。

```{js}
function filter_default() {
    document.getElementById("filter").getElementsByClassName("selectized") 
[0].selectize.setValue("a", false);
 }
window.onload = filter_default;
```

为了让它为您工作，您可能需要在块中更改一些参数{js}。

1.首先，您需要回顾一下用作元素标签的内容filter_select。这是第一个论点。在上面的示例中，filter_select("filter",表示您已使用“filter”作为过滤器的标签。

假设我们使用“lantern”作为串扰过滤器的 ID。您将更document.getElementById("filter")改为document.getElementById("lantern")在{js}.

2.接下来，您需要查看默认选择的值。selectize.setValue("a"在示例中，该值通过块中的位设置为“a” {js}。您可以选择数据中存在的任何值作为默认值。例如，如果您有源数据：

other_dat<-data.frame(light=c("bulb","sun","biological"),amount=c(50,1000,3))

您可以使用（请记住，我们已选择将 filter_select 标记为“lantern”）：

```{js}
function filter_default() {
    document.getElementById("lantern").getElementsByClassName("selectized") 
[0].selectize.setValue("bulb", false);
 }
window.onload = filter_default;
```

将默认的filter_select值设置为“bulb”，或者：

```{js}
function filter_default() {
    document.getElementById("lantern").getElementsByClassName("selectized") 
[0].selectize.setValue("sun", false);
 }
window.onload = filter_default;
```

将默认值设置为“sun”。