叶节点细胞景观的不同行为

Question

output 应该看起来像我需要使用 cytoscape.js 为我的学士论文创建特定的树（系统发育树），对于这些，将内部节点着色为不同于子节点（或叶节点 = 没有任何后代的节点，见图片）。 我是 html 的新手，所以在回答时请记住这一点。 我查看了 Cytoscape 的手册，但找不到解决方案。 通过使用选择节点

cy.nodes(':child').not(':parent');

不知何故没有工作。 非常感谢您的回答！

编辑：它现在在 klay 中工作，但可视化并不完美，我想得到一些看起来像图片的东西。

Answer 1

您可以只使用内置的 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>

叶节点细胞景观的不同行为

问题描述

1 个解决方案

解决方案1
3 已采纳 2020-06-29 11:21:42

叶节点细胞景观的不同行为

问题描述

1 个解决方案

解决方案1 3 已采纳 2020-06-29 11:21:42

解决方案1
3 已采纳 2020-06-29 11:21:42