Cytoscape event target undefined

user_7146357 0
Viewed 597

I put together a minimal working Cytoscape example. I can get the graph to display, but I am mostly interested in handling events, and that's where I'm having difficulty.

The problem is that instead of being able to access individual elements' properties, I can see that the target of any event is undefined.

Below is my entire html file. Please note - I am only interested in the line

cy.nodes().bind('mouseover', (e) => console.log(e.target));

When I'm looking at the console, I can only see "undefined" whenever I move the mouse pointer over a node. As I said above, I want to eventually be able to access element properties.

<!doctype html>
<html>
<head>
<title>Tutorial 1: Getting Started</title>
<script src="cytoscape.js"></script>
</head>

<style>
#cy {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
</style>
<body>
<div id="cy"></div><script>
      var cy = cytoscape({
        container: document.getElementById('cy'),
        elements: [
      { data: { id: 'a' } },
      { data: { id: 'b' } },
      {
        data: {
          id: 'ab',
          source: 'a',
          target: 'b'
        }
      }]
  });

  cy.unbind("tap"); 

cy.bind("tap", "edge",function(evt) {
var tgt=this;
  alert(tgt);

});

cy.nodes().bind('mouseover', (e) => console.log(e.target));  


</script>
</body>
</html>
cytoscape.js events
1 Answers

You can see a working example in the snippet below, I really just changed the import, nothing else:

var cy = cytoscape({
  container: document.getElementById('cy'),
  elements: [{
      data: {
        id: 'a'
      }
    },
    {
      data: {
        id: 'b'
      }
    },
    {
      data: {
        id: 'ab',
        source: 'a',
        target: 'b'
      }
    }
  ]
});

cy.unbind("tap");

cy.bind("click", "node, edge", function(evt) {
  var tgt = evt.target.data();
  console.log(tgt);

});

cy.nodes().bind('mouseover', (e) => console.log(e.target.data()));
#cy {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}
<html>

<head>
  <title>Tutorial 1: Getting Started</title>
  <script src="https://cdn.jsdelivr.net/npm/cytoscape@3.11.0/dist/cytoscape.min.js"></script>
</head>

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

</html>

user_89187210
Related