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

Question

我有一个来自 networkd3 渲染的 Sankey 网络，在一个闪亮的应用程序中显示了一年内的转换，并为用户提供了多种过滤数据的选项。我遇到了链接未与节点完全连接并进入其他链接的问题，特别是当用户选择一小部分组时导致绘图水平方向比垂直方向长（即，每年显示的年份多于组） - 请参见下面的示例）。目录：“课程/{userID}/{courseID}”courseID 是在“userID”文档中创建子集合时随机生成的 ID。不幸的是，我能够使用 .set() 运行的代码不会创建新的子集合，而只是更新当前文档。是否有可用于在文档中创建新集合的函数？代码：export const createCourse = (course) => {        (...)    //firestore.collection("courses").doc(authorId).set({   <---This commented out line updates the document, yet I'm trying to construct a new sub-collection inside this document, not just change fields inside of it.     firestore.collection("courses").doc(authorId).add({     <--- This gives me an error stating " firestore.collection(...).doc(...).add is not a function ".   I am trying to figure out what is the correct syntax for this intended action.        ...course,        authorUID: authorId,        courseCreatedAt: new Date()    }).then(() => {    (...)};

Answer 1

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, 0); stroke-opacity: 0.2;"></path>

    

    <g transform="translate(100,0)">

    

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

    

    </g>

    

</svg>

默认情况下，networkD3's sankey plot 尝试使用其容器允许的尽可能多的水平和垂直空间，在您的情况下，这会导致高度与宽度的比例低于最佳水平，这使得节点之间的水平距离相对较小，并且高度节点的数量（以及链接的厚度）相对较大。

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

sankeyNetwork(

  Links = links,

  Nodes = nodes,

  Source = "source",

  Target = "target",

  Value = "count",

  NodeID = "name",

  iterations = 0, 

  sinksRight = FALSE,

  height = 250,

  width = 1000

)