3

I ´m working with cytoscape.js and trying to show edges between nodes of the graph. I want to show the edge(s) only if I click on that particular node. for example here I have three nodes a -> b -> c:

if I click on node c then the edge between c and b will appear. if I click on node b then edges from a to b to c will appear.

document.addEventListener("DOMContentLoaded", function() {
    var cy = (window.cy = cytoscape({
        container: document.getElementById("cy"),
        style: [{
            selector: "node",
            style: {
                content: "data(id)"
            }
        },
            {
                selector: "edge",
                style: {
                    "curve-style": "bezier",
                    "target-arrow-shape": "triangle"
                }
            }
        ],
        elements: {
            nodes: [{
                data: {
                    id: "a"
                }
            }, {
                data: {
                    id: "b"
                }
            }, {
                data: {
                    id: "c"
                }
            }],
            edges: [{
                data: {
                    id: "ab",
                    source: "a",
                    target: "b"
                }
            },{
                data: {
                    id: "bc",
                    source: "b",
                    target: "c"
                }
            } ]
        },
        layout: {
            name: "grid"
        }
    }));

    cy.edges().forEach(function (edge) {
        cy.remove(edge)
    })

});
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: 1;
}

h1 {
  opacity: 0.5;
  font-size: 1em;
  font-weight: bold;
}
<head>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
  <script src="https://unpkg.com/popper.js@1.14.7/dist/umd/popper.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/cytoscape-popper@1.0.4/cytoscape-popper.min.js"></script>
  <script src="https://unpkg.com/tippy.js@4.0.1/umd/index.all.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/tippy.js@4.0.1/index.css" />
</head>

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

1 Answer 1

4

Removing the edges is unnecessary here, just toggle a class for the edge and let the click event handler handle the rest:

document.addEventListener("DOMContentLoaded", function() {
  var cy = (window.cy = cytoscape({
    container: document.getElementById("cy"),
    style: [{
        selector: "node",
        style: {
          content: "data(id)"
        }
      },
      {
        selector: "edge",
        style: {
          "curve-style": "bezier",
          "target-arrow-shape": "triangle",
          "visibility": "hidden", 
          "line-color": "#61bffc",
        }
      },
      {
        selector: "edge.visible",
        style: {
          "visibility": "visible",
        }
      }
    ],
    elements: {
      nodes: [{
        data: {
          id: "a"
        }
      }, {
        data: {
          id: "b"
        }
      }, {
        data: {
          id: "c"
        }
      }],
      edges: [{
        data: {
          id: "ab",
          source: "a",
          target: "b"
        }
      }, {
        data: {
          id: "bc",
          source: "b",
          target: "c"
        }
      }]
    },
    layout: {
      name: "grid"
    }
  }));

  cy.on("click", "node", function(event) {
    let connectedEdges = event.target.connectedEdges();
    connectedEdges.toggleClass("visible");
  });
});
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: 1;
}

h1 {
  opacity: 0.5;
  font-size: 1em;
  font-weight: bold;
}
<head>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
  <script src="https://unpkg.com/popper.js@1.14.7/dist/umd/popper.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/cytoscape-popper@1.0.4/cytoscape-popper.min.js"></script>
  <script src="https://unpkg.com/tippy.js@4.0.1/umd/index.all.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/tippy.js@4.0.1/index.css" />
</head>

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

5
  • Thanks @Stephan T. is it possible to give different color for the edge(s) after making them visible?
    – Stefan
    May 18, 2020 at 9:35
  • What do you mean by that? Do you want the edges to be colored individually or just plain with some specific color?
    – Stephan T.
    May 18, 2020 at 12:53
  • Just plain with some specific color
    – Stefan
    May 18, 2020 at 12:54
  • I have tried like this but it did not workout cy.on("click", "node", function (event) { let connectedEdges = event.target.connectedEdges(); connectedEdges.toggleClass("visible"); cy.edges('[id = ' + connectedEdges + ']').style('line-color', 'red'); });
    – Stefan
    May 18, 2020 at 13:06
  • You have to understand something important here. The stylesheet is there for a reason. Editing styles with .style(...) might seem easier at first, but in reality the classes that you can define in the stylesheet are all that you need. Class in this context refers to the keyword edge. visible, where visible the class specifically for edges.
    – Stephan T.
    May 18, 2020 at 15:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.