亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何避免未完全或正確連接到 sankeyNetwork 中的節點的鏈接?

如何避免未完全或正確連接到 sankeyNetwork 中的節點的鏈接?

胡子哥哥 2022-12-29 15:54:12
我有一個來自 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(() => {    (...)};
查看完整描述

1 回答

?
婷婷同學_

TA貢獻1844條經驗 獲得超8個贊

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

)

http://img1.sycdn.imooc.com//63ad49b60001f6d918620531.jpg

查看完整回答
反對 回復 2022-12-29
  • 1 回答
  • 0 關注
  • 78 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號