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

Question

我想将 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"
)

我尝试使用 for hovertext（或 for 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>'),

可以肯定的是，第一个呈现为“<div>斜体文本</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">')

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

R 中使用 JavaScript 的悬停事件至少可以部分解决该问题（我可以使用更改的图像而不是显示工具提示）；然而，这个页面似乎已经过时了。另外，我不明白javascript代码是如何嵌入的。

gdlmx 解决方案这里还提供了一些可能有用的想法。但是，我的代码必须生成静态 html 输出，因此我不能依赖 Shiny。

Bob's Your Uncle 似乎找到了d3heatmap 的解决方案，如果我没记错的话，它是在 D3 上构建的，就像情节一样。不过，我对 javascript 不太熟悉，而且我不确定我能否很好地遵循他的代码，或者他的解决方案是否也适用于绘图工具提示。

正如Brandon Bertelsen 在这里所解释的，DT::datatable有一个escape参数可以设置为，以避免在数据表内转义 html 代码，从而正确渲染表内的FALSEhtml 代码。据我所知，plotly没有这样的东西。另外，我认为数据表不是建立在 D3 之上的（但我不是 100% 确定）。

关于如何解决这个问题有什么想法吗？非常感谢！

Answer 1

您不能将任意 HTML（例如<div>或<code>或 ）<img>放入悬停标签中，而只能放入简单的格式化标签。

今天Plotly.js 源代码中允许的标签是<br>, <sub>, <sup>, <b>, <i>,<em>