我的目标是创建一个包含标签和悬停效果的交互式多边形。这里有一个例子：
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组件的悬停效果？
正如您所指出的，因为悬停css同时填充了多边形和文本，所以它变得难以辨认。这里是一个破解的解决方案，它使用css来改变多边形和文本层如何受到悬停的影响。只有当您将ggigraph小部件保存为html并从那里进行编辑时，我才知道如何实现这一点。但我没有在R.中更改你的代码
保存gg2图形小部件
这可以使用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旁边的dependencies文件夹中，找到文件widget_files/graphjs-0.1.0/graphJS.min.js。这是一个缩小的文件，因此一些javascript解析器会有所帮助，但不是必需的。搜索代码将css样式添加到页面的位置。在代码中查找此项。如果代码打印得很漂亮，周围会有额外的空格，但这应该是一致的。
"\n.hover_"。。
在这里，我们可以更改注入html的css如何更改它将取决于所使用的ggplot2 geom及其等效的svg在这种情况下，如果想要更改多边形的颜色而不是文本的颜色，我们可以在类之前添加polygon，以指定.hover类只会影响svg多边形对象："npolygon.hover_"。更改并保存文件。
请确保javascript从html文件正确链接。如果您没有使用自包含的文件，那么这已经完成了。如果您使用了一个自包含的文件并解码了base64文件，则需要用<script type = "text/javascript">标记替换原始脚本标记，并将新的javascript放在关闭的</script>标记之前，或者将其放在一个单独的文件中并链接到它。
加载html文件
现在javascript文件已经更改，html将被呈现，并在文档顶部添加一个polygon.hover类，而不是以前的.hover类。任何悬停操作都将仅应用于此处添加的标记类型。