叶节点细胞景观的不同行为 [英] Different behaviour for leaf nodes cytoscape

问题描述

输出应该是什么样子我需要使用 cytoscape.js 为我的学士论文创建特定的树(系统发育树)，对于这些，将内部节点着色为不同于子节点(或叶节点 = 没有任何后代的节点，见图).我是 html 的完全新手，所以请在回答时记住这一点.我查看了 Cytoscape 的手册，但找不到解决方案.使用

What the output should look like I need to create specific trees (phylogenetic trees) with cytoscape.js for my bachelor thesis and for these it would be beneficial to color inner nodes different than child nodes (or leaf nodes = Nodes not having any descendent, see picture). I am a complete newbie in html, so please keep that in mind when answering. I took a look at the manual of Cytoscape but could not find a solution. Picking the nodes by using

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

不知何故不起作用.非常感谢您的回答！

somehow did not work. Thanks a lot in advance for an answer!

它现在在 klay 中工作，但可视化并不完美，我想在图片中看到一些东西.

It worked in klay now but the visualisation is not perfect, I would like to get something looking like in the picture.

推荐答案

你可以直接使用内置函数 cy.nodes().leaves().addClass(...)，其中 ... 是样式表中定义所需 css 的类.

You can just use the built in function cy.nodes().leaves().addClass(...), where ... is a class in your stylesheet defining the desired css.

编辑

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>

这篇关于叶节点细胞景观的不同行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！