使用plotly过滤链接视图中的图例

我正在研究一个链接图（类似于SharedData 绘图管道 https://plotly-book.cpsievert.me/linking-views-without-shiny.html来自 Carson Sievert 的 R 绘图。该图显示了我当前悬停在其上的一项的图例。但是，现在图例显示两个元素，一个用于条形图，一个用于折线图。

• 如何删除第一个图例元素（条形图的红色方块）并仅保留折线图的图例（红线）？

这是当前代码：

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

sd <- SharedData$new(txhousing, ~city)

base <- plot_ly(sd, color = I("black")) %>%
        group_by(city) %>%
        layout(showlegend = TRUE)

p1 <- base %>%
      summarise(has = sum(is.na(median))) %>%
      filter(has > 0) %>%
      arrange(has) %>%
      add_bars(x = ~has, y = ~factor(city, levels = city), 
       hoverinfo = "none", showlegend = FALSE) %>%
      layout(
      barmode = "overlay",
        xaxis = list(title = "Number of months missing"),
        yaxis = list(title = "")
      ) 

p2 <- base %>%
   add_lines(x = ~date, y = ~median, alpha = 0.3, showlegend = FALSE) %>%
   layout(xaxis = list(title = ""))

gp <- subplot(p1, p2, titleX = TRUE, widths = c(0.3, 0.7)) %>% 
  layout(margin = list(l = 120)) %>%
  highlight(color = "red",
        defaultValues = "Victoria",
        selected = attrs_selected(showlegend = TRUE, mode = "lines"
    ))

 gp

有人提到最终删除图例元素可能有效，但在这里对我不起作用。

gp$x$data[[1]]$showlegend <- FALSE

如果 Plotly 没有为我们提供隐藏由以下人员创建的图例的方法highlight，那么让我们使用 Plotly 自带的函数来实现这一点。

隐藏一次跟踪所需的 JavaScript 代码：

var updated = {showlegend: false};
var myPlot = document.getElementsByClassName('plotly')[0];
Plotly.restyle(myPlot, updated, [2]);

在这种情况下，它始终是第三个元素[2]需要隐藏其图例，通常最好根据某些条件动态获取索引。

让我们将其添加到 Plotly 中on_click事件以确保传奇在未来也将不可见。

myPlot.on('plotly_click', function(data){
  Plotly.restyle(myPlot, updated, [2]);
});

最后将所有内容添加到输出中，我们就可以了。

javascript <- "
var updated = {showlegend: false};
var myPlot = document.getElementsByClassName('plotly')[0];
Plotly.restyle(myPlot, updated, [2]);
myPlot.on('plotly_click', function(data){
  Plotly.restyle(myPlot, updated, [2]);
});
"

w <- plotly::as_widget(gp)
w <- htmlwidgets::prependContent(w, onStaticRenderComplete(javascript), data=list(''))
htmlwidgets::saveWidget(w, "cities.html")
w