Different behaviour for leaf nodes cytoscape

Question

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!

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

Answer 1

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

Edit

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/[email protected]/klay.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/cytoscape-klay.min.js"></script>
</head>

<body>
  <div id="cy"></div>
</body>

</html>