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

Question

My goal is to create an interactive polygon which includes a label and hover effect. Here is an example:

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;",
)

When I hover over any place inside the polygon (except for the label), its color changes and the text is still visible. So, everything is fine. I would like to have the exact same effect for the label as well. I want the polygon to change color and the text to remain the same on hover over the label. The attempt below fills the label, making it illegible.

# 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;",
)

Is it possible to tweak the hover effects for each ggplot component?

Answer 1

As you noted, because the hover css is filling both the polygon and the text, it becomes illegible. Here is hacked solution that uses css to change how the polygon and text layer are affected by the hover. I only know how to make this work if you save the ggiraph widget as html and edit from there. But I didn't change your code in R.

Save the gg2 ggiraph widget

This can be done using htmlwidgets::saveWidget() , the RStudio Viewer, or some other way. It is easiest if the file isn't selfcontained so that a folder of scripts and stylesheets is generated alongside the html file.

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

If you save as html from the RStudio Viewer, the javascript files are base64 encoded in the html file and need to be decoded to be changed. In the html file there are several <script src="data-application/x-javascript ... "></script> tags with the encoding. I found that the second to last one will be equivalent to the ggiraphjs.min.js once it is decoded.

Edit the ggiraphjs.min.js file

In the dependencies folder next to the html, find the file widget_files/ggiraphjs-0.1.0/ggiraphjs.min.js . This is a minified file so some javascript parser would be helpful but not necessary. Search for the location where the code adds css styles to the page. Look for this in the code. If the code is pretty-printed there are extra spaces around, but this should be consistent.

... "\\n.hover_" ...

Here, we can change the css that is injected to the html. How you change it will depend on the ggplot2 geoms used and their svg equivalent. In this case, of wanting to change color of the polygon and not the text, we can add polygon before the class to specify that the .hover class will only affect svg polygon objects: "\\npolygon.hover_" . Change and save the file.

Be sure that the javascript is correctly linked from the html file. If you didn't use a self-contained file, this is already done. If you used a self-contained file and have decoded the base64 file, you'll need to replace the original script tag with a <script type = "text/javascript"> tag and put the new javascript before a closing </script> tag, or put it in a separate file and link to it.

Load the html file

Now that the javascript file is changed, the html will be rendered and add a polygon.hover class at the top of the document instead of the .hover class from before. Any hover actions will only be applied to the type of tags added here.