如何避免未完全或正确连接到 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%;">&nbsp; &nbsp; <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>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <g transform="translate(100,0)">&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; </g>&nbsp; &nbsp;&nbsp;</svg>默认情况下，networkD3's sankey plot 尝试使用其容器允许的尽可能多的水平和垂直空间，在您的情况下，这会导致高度与宽度的比例低于最佳水平，这使得节点之间的水平距离相对较小，并且高度节点的数量（以及链接的厚度）相对较大。您可以通过更改容器的大小并刷新（即调整浏览器窗口的大小，或更改容器的 HTML/CSS 属性）或通过指定宽度和高度来“修复”此问题，以便该比例适用于您的数据有，例如...sankeyNetwork(&nbsp; Links = links,&nbsp; Nodes = nodes,&nbsp; Source = "source",&nbsp; Target = "target",&nbsp; Value = "count",&nbsp; NodeID = "name",&nbsp; iterations = 0,&nbsp;&nbsp; sinksRight = FALSE,&nbsp; height = 250,&nbsp; width = 1000)