ggiraph横向图例标题置于顶部时丢失交互性的问题

问题原因 #

你调用了ggplot2原生的guide_legend()函数，该函数不支持传递ggiraph绑定的交互属性，会直接覆盖掉scale_fill_manual_interactive中配置的tooltip、点击事件、data_id等交互参数，最终导致图例交互丢失。

解决方法 #

将原代码中guides()配置的原生图例引导，替换为ggiraph提供的交互式图例引导函数guide_legend_interactive()即可，原有样式配置参数完全兼容，不需要做其他修改。

你只需要把这行代码：

guides(fill=guide_legend(title.position = "top"))

替换为：

guides(fill=guide_legend_interactive(title.position = "top"))

修改后的完整可运行代码如下：

library(ggplot2)
library(ggiraph)

dat <- data.frame(
  name = c( "Guy", "Ginette", "David", "Cedric", "Frederic" ),
  gender = c( "Male", "Female", "Male", "Male", "Male" ),
  height = c(169, 160, 171, 172, 171 ) )
p <- ggplot(dat, aes( x = name, y = height, fill = gender,
                      data_id = name ) ) +
  geom_bar_interactive(stat = "identity")

p1 <- p +  scale_fill_manual_interactive(
  values = c(Male = "#0072B2", Female = "#009E73"),
  data_id = function(breaks) { as.character(breaks)},
  tooltip = function(breaks) { as.character(breaks)},
  onclick = function(breaks) { paste0("alert(\"", as.character(breaks), "\")") },
  labels = function(breaks) {
    lapply(breaks, function(br) {
      label_interactive(
        as.character(br),
        data_id = as.character(br),
        onclick = paste0("alert(\"", as.character(br), "\")"),
        tooltip = as.character(br)
      )
    })
  }
) + 
  guides(fill=guide_legend_interactive(title.position = "top")) +
  theme(legend.position="top")  

girafe_options(girafe(ggobj = p1),
               opts_hover_key(girafe_css("stroke:red", text="stroke:none;fill:red")))

运行修改后的代码，既可以保留你需要的图例样式配置，也能正常触发展示图例的悬停高亮、点击弹窗、自定义提示框等交互效果。

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