r - 有没有办法用 R 将 html 代码嵌入到工具提示中？

Question

我想在 plotly 的悬停工具提示中嵌入 html 代码。
这是一个工作示例:

plotly::plot_ly(
  type = "pie",
  labels = "A",
  hovertext = '<i>text in italics</i>', # Renders text in italics
  hoverinfo = "text"
)

通过以斜体呈现文本，这个 reprex 似乎工作得很好。但是，更复杂的 html 代码似乎无法呈现为 html，而是呈现为纯文本。
就我而言，我想要的是在工具提示中嵌入图像，如下所示:

plotly::plot_ly(
  type = "pie",
  labels = "A",
  hovertext = '<img src="https://cran.r-project.org/Rlogo.svg">', # Does not render as html
  hoverinfo = "text"
)

我尝试用于 hovertext 的其他一些值(或对于 text ，对于这件事，两者的工作方式相同):

以纯文本形式呈现的值:

'<div><i>text in italics</i></div>'
'<div><img src="https://cran.r-project.org/Rlogo.svg"></div>',
'<img src="https://cran.r-project.org/Rlogo.svg">',
htmltools::HTML('<img src="https://cran.r-project.org/Rlogo.svg">'),
htmltools::HTML('<div><img src="https://cran.r-project.org/Rlogo.svg"></div>'),

可以肯定的是，第一个呈现为“

斜体文本

”(斜体可以)

使工具提示根本不起作用的值:

htmltools::img(src="https://cran.r-project.org/Rlogo.svg")
htmltools::div(htmltools::img(src="https://cran.r-project.org/Rlogo.svg"))
htmltools::div('<img src="https://cran.r-project.org/Rlogo.svg">')

相关帖子和可能的解决方案:

Hover Events with JavaScript in R至少可以部分解决问题(我可以使用更改的图像而不是显示工具提示)；然而，这个页面似乎已经过时了。另外，我不明白 javascript 代码是如何嵌入的。

gdlmx solution here还提供了一些可能有用的想法。但是，我的代码必须生成静态 html 输出，所以我不能依赖 Shiny。

Bob's Your Uncle seems to find a solution对于 d3heatmap，如果我没记错的话，它是在 D3 上按 plotly 构建的。不过，我对 javascript 不太熟悉，我不确定我是否可以很好地遵循他的代码，或者他的解决方案是否也适用于绘图工具提示。

如解释 by Brandon Bertelsen here , DT::datatable有一个 escape可以设置为 FALSE 的参数, 以避免转义数据表中的 html 代码，从而正确呈现表中的 html 代码。据我所知， plotly 没有这样的东西。另外，我认为数据表不是建立在 D3 之上的(但我不是 100% 确定)。

关于如何解决这个问题的任何想法？非常感谢!

Answer 1

您不能放置任意 HTML，例如 <div>或 <code>或 <img>进入hoverlabels，只是简单的格式化标签。

allowed tags in the source of Plotly.js今天是 <br> , <sub> , <sup> , <b> , <i> , <em>