2016-07-25 93 views
1

有沒有一種方法可以像cytoscape.js中創建Sankey一樣的邊緣寬度圖?要清楚,我不想在cytoscape.js中創建一個Sankey圖。我所希望的是創建具有總共來自其節點的大小的邊。Cytoscapejs:Sankey般的邊緣尺寸

修改邊緣寬度的一種方法是通過強度屬性,但我沒有找到一種方法來指定該屬性與原始節點的大小相關。

在此先感謝

安迪

回答

1

您可以使用數據映射,與剛剛成立data.width每個元素在初始化:

var cy = cytoscape({ 
    container: $('.cytoscape-container').get(0), 
    ..., 
    style: { 
    { 
     selector: 'edge', 
     style: { 
     'width': 'data(size)' 
     } 
    } 

    { 
     selector: 'node', 
     style: { 
     'width': 'data(size)', 
     'height': 'data(size)' 
     } 
    } 
    } 
}); 

或者,你可以使用類:

var cy = cytoscape({ 
    container: $('.cytoscape-container').get(0), 
    ..., 
    style: { 
    { 
     selector: 'edge.foo', 
     style: { 
     'width': 20 
     } 
    } 

    { 
     selector: 'node.foo', 
     style: { 
     'width': 20, 
     'height': 20 
     } 
    } 
    } 
}); 
+0

最好不要使用自定義函數,除非絕對必要 - 因爲它現在意味着你負責微操作性能。除非您使用緩存,否則您將使用自定義函數創建大幅減速。此外,寫作風格時的閱讀風格沒有意義,因爲它創造了競爭條件。只需使用類或數字爲樣式表中的邊和節點設置相同的寬度。使用樣式表的內置功能,讓圖書館爲您完成繁重的工作。 – maxkfranz

+0

這是一個很好的觀點,re:每個渲染中所有這些函數調用的性能。我沒有用過很多大圖來看它如何快速降級,文檔沒有強調「避免不必要的」心態......也許應該增加這些內容? 除非你建議他們應該程序化生成,否則類似乎不適合數據驅動的節點大小? – peteorpeter

+1

調用.data()在自動駕駛儀上的風格:它的perf都已經過優化。如果您調用.data()更改節點大小,則Cytoscape會自動執行緩存。如果您不能很好地管理函數調用,那麼每次可能重新計算樣式時,都需要這樣做 - 因爲Cytoscape無法對您的函數做出假設。像第二種靜態樣式表對於perf來說更好,因爲Cytoscape可以對樣式表塊和diff-patch樣式更新進行靜態分析。 – maxkfranz