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图形小部件

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

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

如果从javascript查看器中另存为RStudio，则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。在这种情况下，如果想要改变多边形而不是文本的颜色，我们可以在类之前添加polygon，以指定.hover类只影响ggplot2多边形对象："\npolygon.hover_"。更改并保存文件。

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

加载html文件

现在javascript文件已更改，html将被呈现并在文档顶部添加一个polygon.hover类，而不是以前的.hover类。任何悬停操作都将仅应用于此处添加的标签类型。