在 R 中，如何在 Sankey Graph 的链接/路径上显示值？

编程问答 2022-04-27

问题描述

背景

我正在尝试创建一个如下图所示的 Sankey 图。实际上，我想获得一个输出，其中将在路径（从一个节点到另一个节点）中设置值 (10,20,30,40)。

enter image description here

我是如何尝试的？

起初，我尝试使用 Python 的 Plotly library。但是，在某处我看到无法在 Plotly（Python）中设置 Sankey 图的链接或路径中的值。后来，我切换到 R（也出于其他一些原因），那里有更多可用资源（我认为）。但是，在这里，我也面临着同样的问题。我已经检查了 R 中 SO 的许多教程（例如 this one）、问答（例如 1、2、3）。尽管如此，我还是找不到在路径中显示值的教程或资源！

我的问题

如何在 R 中显示 Sankey Graph 的链接/路径上的值？

注意：SO 的 This 和 this 问题似乎很相似。但是，我无法理解如何将这些融入我的代码中。

示例代码（收集​​自 here）

# install.packages('networkD3')
library(networkD3)
nodes = data.frame("name" = 
 c("Node A",# Node 0
 "Node B",# Node 1
 "Node C",# Node 2
 "Node D"))# Node 3
links = as.data.frame(matrix(c(
 0,1,10,# Each row represents a link. The first number
 0,2,# represents the node being conntected from. 
 1,3,# the second number represents the node connected to.
 2,40),# The third number is the value of the node
 byrow = TRUE,ncol = 3))
names(links) = c("source","target","value")


 sankeyNetwork(Links = links,Nodes = nodes,Source = "source",Target = "target",Value = "value",NodeID = "name",fontSize= 50,nodeWidth = 30)

解决方法

这可以通过在使用 htmlwidgets::onRender() 呈现时注入自定义 JavaScript 代码来实现。下面的示例最初将适当地定位链接标签，但如果手动移动节点，链接标签将不会相应地自动更新。要实现这一点，您可能还必须覆盖默认的 dragmove 行为。

library(htmlwidgets)
library(networkD3)

nodes <- 
  data.frame(
    name = c("Node A","Node B","Node C","Node D")
  )

links <- 
  data.frame(
    source = c(0,1,2),target = c(1,2,3,3),value = c(10,20,30,40)
  )

p <- sankeyNetwork(Links = links,Nodes = nodes,Source = "source",Target = "target",Value = "value",NodeID = "name",fontSize= 20,nodeWidth = 30)

htmlwidgets::onRender(p,'
  function(el) { 
    var nodeWidth = this.sankey.nodeWidth();
    var links = this.sankey.links();
        
    links.forEach((d,i) => {
      var startX = d.source.x + nodeWidth;
      var endX = d.target.x;
      
      var startY = d.source.y + d.sy + d.dy / 2;
      var endY = d.target.y + d.ty + d.dy / 2;
      
      d3.select(el).select("svg g")
        .append("text")
        .attr("text-anchor","middle")
        .attr("alignment-baseline","middle")
        .attr("x",startX + ((endX - startX) / 2))
        .attr("y",startY + ((endY - startY) / 2))
        .text(d.value);
    })
  }
')

enter image description here