葉節點細胞景觀的不同行為
[英]Different behaviour for leaf nodes cytoscape
問題描述
output 應該看起來像我需要使用 cytoscape.js 為我的學士論文創建特定的樹（系統發育樹），對於這些，將內部節點着色為不同於子節點（或葉節點 = 沒有任何后代的節點，見圖片）。 我是 html 的新手，所以在回答時請記住這一點。 我查看了 Cytoscape 的手冊，但找不到解決方案。 通過使用選擇節點
cy.nodes(':child').not(':parent');
不知何故沒有工作。 非常感謝您的回答！
編輯：它現在在 klay 中工作，但可視化並不完美，我想得到一些看起來像圖片的東西。
1 個解決方案
解決方案1
3 已采納 2020-06-29 11:21:42
您可以只使用內置的 function cy.nodes().leaves().addClass(...) ，其中...是您的樣式表中的 class 定義所需的 ZC7A628CBA22E28EB167B5F5C6AE22A。
編輯
document.addEventListener("DOMContentLoaded", function() { var cy = (window.cy = cytoscape({ container: document.getElementById("cy"), // demo your layout layout: { name: "klay" // some more options here... }, style: [{ selector: "node", style: { "background-color": "#dd4de2" } }, { selector: ".leaf", style: { "background-color": "#000" } }, { selector: "edge", style: { "curve-style": "bezier", "target-arrow-shape": "triangle", "line-color": "#dd4de2", "target-arrow-color": "#dd4de2", opacity: 0.5 } } ], elements: { nodes: [{ data: { id: "n0" } }, { data: { id: "n1" } }, { data: { id: "n2" } }, { data: { id: "n3" } }, { data: { id: "n4" } }, { data: { id: "n5" } }, { data: { id: "n6" } }, { data: { id: "n7" } }, { data: { id: "n8" } }, { data: { id: "n9" } }, { data: { id: "n10" } }, { data: { id: "n11" } }, { data: { id: "n12" } }, { data: { id: "n13" } }, { data: { id: "n14" } }, { data: { id: "n15" } } ], edges: [{ data: { source: "n0", target: "n1" } }, { data: { source: "n1", target: "n2" } }, { data: { source: "n1", target: "n3" } }, { data: { source: "n2", target: "n4" } }, { data: { source: "n4", target: "n5" } }, { data: { source: "n4", target: "n6" } }, { data: { source: "n6", target: "n7" } }, { data: { source: "n6", target: "n8" } }, { data: { source: "n8", target: "n9" } }, { data: { source: "n8", target: "n10" } }, { data: { source: "n10", target: "n11" } }, { data: { source: "n11", target: "n12" } }, { data: { source: "n12", target: "n13" } }, { data: { source: "n13", target: "n14" } }, { data: { source: "n13", target: "n15" } } ] } })); cy.nodes().leaves().addClass("leaf"); });
body { font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif; font-size: 14px; } #cy { position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 999; }
<html> <head> <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script> <script src="https://unpkg.com/klayjs@0.4.1/klay.js"></script> <script src="https://cdn.jsdelivr.net/npm/cytoscape-klay@3.1.3/cytoscape-klay.min.js"></script> </head> <body> <div id="cy"></div> </body> </html>
cytoscape.js 多種布局，復合節點內的不同布局
[英]cytoscape.js multiple layouts, different layout within compound nodes
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.