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 для изменения того, как наведение полигона и текстового слоя влияет на наведение. Я знаю, как это сделать, только если вы сохраните виджет 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)

Если вы сохраняете html из RStudio Viewer, файлы javascript кодируются в формате base64 в html-файле и должны быть декодированы для изменения. В файле 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_"...

Здесь мы можем изменить CSS, который вводится в HTML. Как вы это измените, будет зависеть от используемых геомов ggplot2 и их эквивалента SVG. В этом случае, если вы хотите изменить цвет многоугольника, а не текста, мы можем добавить polygon перед классом, чтобы указать, что .hover класс будет влиять только на объекты многоугольника SVG: "\npolygon.hover_", Измените и сохраните файл.

Убедитесь, что JavaScript правильно связан с HTML-файла. Если вы не использовали автономный файл, это уже сделано. Если вы использовали автономный файл и декодировали файл base64, вам нужно заменить оригинальный тег script на <script type = "text/javascript"> пометить и поставить новый JavaScript перед закрытием </script> пометить или поместить в отдельный файл и ссылку на него.

Загрузите HTML-файл

Теперь, когда файл javascript изменен, HTML будет отображен и добавит polygon.hover класс в верхней части документа вместо .hover класс раньше. Любые действия при наведении будут применяться только к типу тегов, добавленных здесь.