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 查看器或其他方式来完成。如果文件不是独立的，那么最简单的方法是在 html 文件旁边生成一个包含脚本和样式表的文件夹。

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

如果您从 RStudio 查看器另存为 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指定 .hover 类将只影响 svg 多边形对象："\npolygon.hover_"。更改并保存文件。

确保从 html 文件正确链接了 javascript。如果你没有使用自包含文件，这已经完成了。如果您使用自包含文件并已解码 base64 文件，则需要将原始脚本标记替换为 <script type = "text/javascript"> 标记并将新的 javascript 放在关闭 </script> 标记之前，或者将其放在单独的文件并链接到它。

加载html文件

现在 javascript 文件已更改，将呈现 html 并在文档顶部添加 polygon.hover 类，而不是之前的 .hover 类。任何悬停动作只会应用于此处添加的标签类型。