如何避免链接未完全或正确连接到sankeyNetwork中的节点？

如何解决如何避免链接未完全或正确连接到sankeyNetwork中的节点？

我在一个Shiny应用程序中有一个来自networkd3渲染的Sankey网络，其中显示了一年内的过渡情况，并为用户提供了各种选项来过滤数据。我遇到了一个问题，即链接未完全与节点连接并进入其他链接，特别是当用户选择一小组小的子集时，导致该图在水平方向上比在垂直方向上更长（即，显示的年份比每年的组长） -请参见下面的示例。

我找不到关于堆栈溢出的修复程序。我认为问题可能出在底层Javascript中，所以我不胜其烦。任何帮助将不胜感激。谢谢！在下面重新表达。

## Create links dataframe 
# Note that the 0 count links are for displaying nodes in the proper year
links <- data.frame(
  from = c(
    "A 2015","A 2016","A 2017","A 2018","A 2019","A 2015","A 2018"
  ),to = c(
    "B 2016","B 2017","B 2018","B 2019","B 2020","A 2019"
  ),count = c(48,36,31,46,24,0)
)

## Create node dataframe
nodes <- data.frame(
  name = unique(
    c(
      as.character(links$from),as.character(links$to)
    )
  )
)

## Add node indices to link data (zero-indexed)
links$source = match(links$from,nodes$name)-1
links$target = match(links$to,nodes$name)-1

## Render Sankey
library(networkD3)
sankeyNetwork(
  Links = links,Nodes = nodes,Source = "source",Target = "target",Value = "count",NodeID = "name",iterations = 0,sinksRight = FALSE
)

解决方法

D3的sankey模块建立的链接是具有贝塞尔曲线的SVG路径。在您的示例中，浏览器的SVG引擎尝试在非常狭窄的水平空间内以非常粗（笔划宽度）的路径绘制弯曲路径。例如，比较以下两个SVG（其中唯一的区别是笔划宽度）...

<svg style="width: 100%; height: 100%;">

    <path d="M 0 50 C 25,50 25,100 50,100" style="stroke-width: 10px; fill: none; stroke: rgb(0,0); stroke-opacity: 0.2;"></path>
    
    <g transform="translate(100,0)">
    
        <path d="M 0 50 C 25,100" style="stroke-width: 80px; fill: none; stroke: rgb(0,0); stroke-opacity: 0.2;"></path>
    
    </g>
    
</svg>

默认情况下，networkD3的sankey图尝试使用其容器所允许的水平和垂直空间，在您的情况下，这导致高度与宽度之比小于最佳值，从而使节点相对较小，节点的高度（以及链接的厚度）相对较大。

您可以通过更改容器的大小并刷新（例如，调整浏览器窗口的大小或更改容器的HTML / CSS属性），或通过指定宽度和高度来“解决”此问题，以使比例适用于您拥有的数据，例如...

sankeyNetwork(
  Links = links,Nodes = nodes,Source = "source",Target = "target",Value = "count",NodeID = "name",iterations = 0,sinksRight = FALSE,height = 250,width = 1000
)