ggiraph：同一ggplot上的不同悬停效果

Question

我的目标是创建一个包含标签和悬停效果的交互式多边形。这是一个示例：

library(dplyr)
library(ggplot2)
library(ggiraph)

df <- data_frame(
  x = c(0, 0, 3, 5, 3, 6, 0),
  y = c(0, 4, 6, 5, 3, 0, 0),
  tooltip = replicate(7, "Hello")
)

text_df <- data_frame(
  x = 2,
  y = 3,
  label = "TEST",
  tooltip = "Hello"
)

gg <- ggplot() +
  geom_polygon_interactive(
    data = df,
    aes(
      x = x, 
      y = y,
      tooltip = tooltip,
      data_id = tooltip
    )
  ) +
  geom_text_interactive(
    data = text_df,
    aes(
      x = x, 
      y = y,
      label = label,
      tooltip = tooltip,
    ),
    color = "white",
    size = 5
  )

ggiraph(
  ggobj = gg,
  hover_css = "fill:red;",
)

当我将鼠标悬停在多边形内的任何位置（标签除外）上时，其颜色都会更改，并且文本仍然可见。所以，一切都很好。我也希望标签具有完全相同的效果。我希望将多边形更改颜色并将文本悬停在标签上时保持不变。下面的尝试会填满标签，使其难以辨认。

# using the same data frame from the above-given example 

gg2 <- ggplot() +
  geom_polygon_interactive(
    data = df,
    aes(
      x = x, 
      y = y,
      tooltip = tooltip,
      data_id = tooltip
    )
  ) +
  geom_text_interactive(
    data = df,
    aes(
      x = 2, 
      y = 3,
      label = "TEST",
      tooltip = tooltip,
      data_id = tooltip
    ),
    color = "white",
    size = 5
  )

ggiraph(
  ggobj = gg2,
  hover_css = "fill:red;",
)

是否可以调整每个ggplot组件的悬停效果？

Answer 1

如前所述，由于悬停css同时填充了多边形和文本，因此变得难以辨认。这是使用css更改悬停如何影响多边形和文本层的黑客解决方案。我只知道如果将ggiraph小部件另存为html并从中进行编辑，则如何使它起作用。但是我没有在R中更改您的代码。

保存gg2 ggiraph小部件

这可以使用htmlwidgets::saveWidget()，RStudio Viewer或其他方法来完成。如果文件不是自包含的，那么最简单的做法是在html文件的旁边生成一个脚本和样式表文件夹。

#For example:
htmlwidgets::saveWidget(ggiraph(ggobj = gg2,
                                hover_css = "fill:red;"),
                        file = "widget.html",
                        selfcontained = FALSE)

如果从RStudio Viewer中另存为html，则javascript文件在html文件中是base64编码的，需要进行解码才能更改。在html文件中，有几个带有编码的<script src="data-application/x-javascript ... "></script>标签。我发现倒数第二个等同于 ggiraphjs.min.js ，一旦被解码。

编辑ggiraphjs.min.js文件

在html旁的依赖项文件夹中，找到文件 widget_files / ggiraphjs-0.1.0 / ggiraphjs.min.js 。这是一个缩小的文件，因此一些javascript解析器会有所帮助，但不是必需的。搜索代码将css样式添加到页面的位置。在代码中查找。如果代码印刷精美，则周围会有多余的空格，但这应该是一致的。

  

...“ \ n.hover_” ...

在这里，我们可以更改注入到html的css。 如何更改它取决于所使用的ggplot2几何图形及其svg等效项。在这种情况下，要更改多边形而不是文本的颜色，我们可以在{类，用于指定polygon类仅影响svg多边形对象：.hover。更改并保存文件。

请确保从html文件正确链接了javascript。如果您不使用独立文件，则此操作已经完成。如果您使用的是自包含文件并已对base64文件进行了解码，则需要将原始脚本标签替换为"\npolygon.hover_"标签，并将新的javascript放在结束<script type = "text/javascript">标签之前，或者放在单独的文件中并链接到它。

加载html文件

现在更改了javascript文件，将呈现html并在文档顶部添加一个</script>类，而不是之前的polygon.hover类。任何悬停操作都只会应用于此处添加的标签类型。