如何在R的networkD3桑基图中保留X轴标签并添加Y轴标签

使用networkD3::sankeyNetwork绘制桑基图时，通过htmlwidgets::onRender成功添加了X轴标签，但尝试用combineWidgets添加左右两侧Y轴标签后，原本的X轴标签消失了。需要实现同时保留X轴和Y轴标签的效果。

原效果（仅添加X轴标签）：

添加Y轴标签后效果（X轴标签丢失）：

核心问题 #

combineWidgets会重新构建widget的容器结构，导致之前通过onRender绑定的X轴标签渲染逻辑失效。正确的做法是将X轴和Y轴标签的添加逻辑整合到同一个onRender的JS代码中，无需依赖combineWidgets，直接用D3操作SVG完成标签绘制。

修改后的完整代码 #

library(networkD3)
library(htmlwidgets)

# 准备数据
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 = unique(c(as.character(links$source), as.character(links$target)))
)

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)

# 同时添加X轴标签和Y轴左右标签的JS代码
js_string <-
  '
   function(el) {
    // 添加X轴标签
    var cols_x = this.sankey.nodes()
      .map(d => d.x).filter((v, i, a) => a.indexOf(v) === i)
      .sort(function(a, b){return a - b});

    var x_labels = ["A", "B", "C" ]

    cols_x.forEach((d, i) => {
      d3.select(el).select("svg")
        .append("text")
        .attr("x", d)
        .attr("y", 12)
        .attr("text-anchor", "start")
        .text(x_labels[i]);
    })

    // 添加左侧Y轴标签
    d3.select(el).select("svg")
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", -40)
      .attr("x", -this.sankey.graph().height / 2)
      .attr("text-anchor", "middle")
      .text("左侧Y轴标签")
      .style("font-size", "16px");

    // 添加右侧Y轴标签
    d3.select(el).select("svg")
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", this.sankey.graph().width + 20)
      .attr("x", -this.sankey.graph().height / 2)
      .attr("text-anchor", "middle")
      .text("右侧Y轴标签")
      .style("font-size", "16px");
   }
  '

# 应用渲染逻辑
sankey <- onRender(sankey, js_string)
sankey

关键修改点 #

• 移除combineWidgets依赖，避免容器结构变更导致原有X轴标签渲染逻辑失效
• 将X轴、Y轴标签的绘制逻辑整合到同一个onRender函数中，确保两者同时执行
• 通过D3的rotate(-90)实现Y轴标签垂直显示，利用桑基图自身的高度、宽度属性定位标签到左右居中位置

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