NetworkD3 Sankey图节点悬停标签与值无间距问题修复求助

问题根源 #

networkD3的Sankey图默认会直接将节点的name属性与value属性做字符串拼接生成悬停提示文本，没有添加分隔符或处理格式逻辑，所以会出现Stage364（标签与数值无间距）、Stage3:6464（数值重复）这类异常。

解决方法 #

使用htmlwidgets::onRender()注入自定义JavaScript代码，覆盖默认的tooltip生成逻辑，自定义悬停文本的格式。

完整代码示例 #

假设你的原始Sankey图代码适配节点标签场景，修复后的完整代码如下：

library(networkD3)
library(htmlwidgets)

# 构造示例数据（可替换为你的真实数据）
nodes <- data.frame(
  name = c("Stage 1", "Stage 2", "Stage 3: A", "Stage 3: B")
)

links <- data.frame(
  source = c(0, 0, 1),
  target = c(2, 3, 2),
  value = c(64, 36, 42)
)

# 生成基础Sankey图
sankey <- sankeyNetwork(
  Links = links,
  Nodes = nodes,
  Source = "source",
  Target = "target",
  Value = "value",
  NodeID = "name",
  fontSize = 12,
  nodeWidth = 30
)

# 注入自定义JS修复悬停文本格式
sankey <- onRender(
  sankey,
  '
  function(el, x) {
    // 获取所有节点元素
    var nodeElements = d3.select(el).selectAll(".node");
    
    // 为每个节点绑定自定义tooltip逻辑
    nodeElements.select("rect")
      .on("mouseover", function(event, d) {
        // 自定义悬停文本格式，可根据需求调整
        var tooltipText = d.name + "\\n数值: " + d.value;
        
        // 创建tooltip元素（首次触发时生成）
        var tooltip = d3.select(el).select(".sankey-tooltip");
        if (tooltip.empty()) {
          tooltip = d3.select(el)
            .append("div")
            .attr("class", "sankey-tooltip")
            .style("position", "absolute")
            .style("background", "#fff")
            .style("padding", "8px")
            .style("border", "1px solid #ccc")
            .style("border-radius", "4px")
            .style("pointer-events", "none")
            .style("opacity", 0);
        }
        
        // 显示tooltip
        tooltip.html(tooltipText)
          .style("opacity", 1)
          .style("left", (event.pageX + 10) + "px")
          .style("top", (event.pageY - 10) + "px");
      })
      .on("mouseout", function() {
        // 隐藏tooltip
        d3.select(el).select(".sankey-tooltip").style("opacity", 0);
      });
  }
  '
)

# 渲染图表
sankey

关键说明 #

• 自定义JS代码替换了默认的鼠标悬停事件，完全控制悬停文本的格式，比如可以改成d.name + " (数值: " + d.value + ")"实现行内显示
• 手动创建的tooltip元素样式可根据需求调整，比如修改背景色、字体大小等
• 代码彻底避开了networkD3默认的拼接逻辑，从根源解决格式异常问题

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