使用htmlwidgets::onRender给桑基图加数值，转PNG后数值消失

我使用htmlwidgets::onRender为networkD3绘制的桑基网络图节点标签添加数值，HTML文件中显示正常，但通过webshot::webshot将HTML保存为PNG图片时，节点标签后的数值消失。

HTML显示效果：

PNG显示效果：

复现代码：

library(networkD3)

# 准备数据
links <- data.frame(
  source = c("group_A","group_A", "group_B", "group_C", "group_C", "group_E"), 
  target = c("group_C","group_D", "group_E", "group_F", "group_G", "group_H"), 
  value = c(2,3, 2, 3, 1, 3)
)

nodes <- data.frame(
  name = c(as.character(links$source), as.character(links$target)) |> unique()
)

links$IDsource <- match(links$source, nodes$name) - 1
links$IDtarget <- match(links$target, nodes$name) - 1

# 绘制桑基图
sankey = sankeyNetwork(Links = links,
                       Nodes = nodes,
                       Source = "IDsource",
                       Target = "IDtarget",
                       Value = "value",
                       NodeID = "name",
                       fontSize = 20)

# 添加节点数值标签
js_string <-
  '
  function(el, x){
    d3.select(el).selectAll(".node text")
      .text(d => d.name + " (n = " + d.value + ")");
  }
  '
sankey <- htmlwidgets::onRender(sankey, js_string)

# 保存为HTML
saveNetwork(sankey, "sn.html")

# 保存为PNG
webshot::webshot("sn.html", "sn.png")

解决方案 #

方案1：给webshot添加延迟等待时间 #

webshot默认可能在JS代码执行完毕前就完成截图，通过delay参数设置等待时间，确保节点标签更新完成：

webshot::webshot("sn.html", "sn.png", delay = 5)

可根据页面渲染速度调整延迟时长（单位：秒），建议设置3-10秒。

方案2：使用webshot2替代旧版webshot #

webshot2基于Chrome无头浏览器，对动态JS渲染内容的支持更完善，多数情况下无需额外设置延迟：

1. 安装webshot2：

install.packages("webshot2")

2. 执行截图：

webshot2::webshot("sn.html", "sn.png")

方案3：提前在数据中生成带数值的标签 #

绕过JS渲染的时机问题，直接在nodes数据框中计算并生成带数值的节点名称：

# 计算每个节点的总流量（流入+流出）
nodes$value <- sapply(nodes$name, function(x) {
  sum(links$value[links$source == x]) + sum(links$value[links$target == x])
})

# 生成带数值的节点名称
nodes$name_with_value <- paste0(nodes$name, " (n = ", nodes$value, ")")

# 绘制桑基图时直接使用带数值的标签
sankey = sankeyNetwork(Links = links,
                       Nodes = nodes,
                       Source = "IDsource",
                       Target = "IDtarget",
                       Value = "value",
                       NodeID = "name_with_value",
                       fontSize = 20)

# 保存和截图
saveNetwork(sankey, "sn.html")
webshot::webshot("sn.html", "sn.png")

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