R语言networkd3包sankeyNetwork节点矩形转圆形失效问题求助

错误原因 #

你的代码无法正常生成圆形节点有两个核心问题：

• 直接调用了networkD3未暴露到全局作用域的内部变量：sankey、color_node、format、options，这些变量在自定义的onRender函数中不存在，会触发JS异常导致添加圆形的逻辑终止
• tooltip嵌套逻辑错误，<title>标签不需要嵌套foreignObject即可正常显示提示内容

修正后可运行代码 #

htmlwidgets::onRender(
  p,
  '
  function(el, x){
    // 获取所有节点组元素
    const node = d3.select(el).select("svg").selectAll(".node");
    
    // 移除默认矩形节点
    node.selectAll("rect").remove();
    
    // 读取配置的桑基图节点宽度
    const nodeWidth = x.options.sankey.nodeWidth;
    
    // 添加圆形节点
    node.append("circle")
      .attr("cx", nodeWidth / 2)
      .attr("cy", d => d.dy / 2)
      .attr("r", d => Math.sqrt(d.dy))
      .style("fill", d => d.color)
      .style("stroke", d => d3.rgb(d.color).darker(2))
      .style("opacity", 0.9)
      .style("cursor", "move")
      // 添加默认tooltip
      .append("title")
      .text(d => `${d.name}\n${d.value} 你的单位`);
  }
  '
)

补充说明 #

• networkD3已经把节点的位置、尺寸、颜色、数值所有属性都绑定到了节点的d数据对象上，无需调用内部函数即可直接读取
• 每个.node节点是自带translate(d.x, d.y)变换的g标签，所以圆形的cx直接取节点宽度的一半即可，不需要额外计算x偏移
• 如果需要自定义tooltip样式，可以删掉title相关代码，添加foreignObject自定义DOM结构，不需要嵌套在title标签内

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