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

问题描述

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

Example of rendering issue

我找不到关于堆栈溢出的修复程序。我认为问题可能出在底层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
)

enter image description here

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...