在R 4.3.1中复现Plotly悬停显示图片功能遇阻求助

问题描述 #

尝试创建交互式PCA图，要求悬停每个点时显示对应图片，已有实现案例但无法复现；使用R 4.3.1时遇到警告：[WARNING] Deprecated: --self-contained. use --embed-resources --standalone.

修复后的代码与说明 #

R代码 #

library(plotly)
library(purrr)
library(base64enc)
library(htmltools)

x <- 1:3 
y <- 1:3
logos <- c("r-logo", "penguin", "rstudio")
# 确保images文件夹存在且图片路径正确
uris <- purrr::map_chr(
  logos, ~ base64enc::dataURI(file = sprintf("images/%s.png", .x))
)

d3 <- htmltools::htmlDependency(
  "d3", "7.3",
  src = c(href = "https://cdnjs.cloudflare.com/ajax/libs/d3/7.3.0/"),
  script = "d3.min.js"
)

# 构建图表并绑定自定义交互逻辑
p <- plot_ly(hoverinfo = "none") %>%
  add_text(x = x, y = y, customdata = uris, text = logos) %>%
  htmlwidgets::onRender(readLines("tooltip-image.js"))

# 附加d3依赖到图表组件
p <- htmltools::attachDependencies(p, list(d3))
p

修正后的tooltip-image.js文件 #

function(el) {
  // 初始化tooltip，默认透明且不干扰图表交互
  var tooltip = d3.select('#' + el.id + ' .svg-container')
    .append("div")
    .attr("class", "my-custom-tooltip")
    .style("opacity", 0)
    .style("pointer-events", "none")
    .style("z-index", 1000);

  el.on('plotly_hover', function(d) {
    var pt = d.points[0];
    // 取图表右上角作为图片放置位置（range数组仅含轴的最小/最大值）
    var x = pt.xaxis.range[1];
    var y = pt.yaxis.range[0];
    // 转换数据坐标为像素坐标
    var xPixel = pt.xaxis.l2p(x) + pt.xaxis._offset;
    var yPixel = pt.yaxis.l2p(y) + pt.yaxis._offset;
    // 插入图片并调整位置避免超出容器
    var img = "<img src='" + pt.customdata + "' width='100' style='border-radius:4px;'>";
    tooltip.html(img)
      .style("position", "absolute")
      .style("left", (xPixel - 110) + "px")
      .style("top", (yPixel + 10) + "px");
    // 淡入效果
    tooltip.transition()
      .duration(300)
      .style("opacity", 1);
  });

  el.on('plotly_unhover', function(d) {
    // 淡出效果
    tooltip.transition()
      .duration(500)
      .style("opacity", 0);
  });
}

警告处理 #

[WARNING] Deprecated: --self-contained. use --embed-resources --standalone. 是rmarkdown/knitr的参数弃用提示，导出HTML时需将YAML头部的self_contained: true替换为：

output:
  html_document:
    embed-resources: true
    standalone: true

即可消除警告并保持HTML文件自包含性。

关键修复点 #

• 修正JS中无效的坐标取值：原代码pt.xaxis.range[10]/pt.yaxis.range[6]错误，range数组仅包含轴的最小/最大值两个元素
• 正确附加d3依赖：确保d3.js被加载，否则自定义交互逻辑无法运行
• 优化tooltip初始化样式：添加透明默认值、禁用指针事件、提升层级，避免干扰图表交互
• 调整图片位置：修正像素坐标偏移，防止图片超出图表容器范围

内容的提问来源于stack exchange，提问作者Isabel