Цель события Cytoscape не определена - PullRequest
Новая
       5

Цель события Cytoscape не определена

1 голос
/ 20 октября 2019

Я собрал минимальный рабочий пример Cytoscape. Я могу заставить график отображаться, но меня больше всего интересует обработка событий, и вот тут у меня возникают трудности.

Проблема в том, что вместо возможности доступа к свойствам отдельных элементов я вижучто цель любого события не определена .

Ниже приведен весь мой HTML-файл. Обратите внимание - Меня интересует только строка

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

Когда я смотрю на консоль, я вижу «неопределенное» только тогда, когда наведу указатель мыши на узел. Как я уже говорил выше, я хочу в конечном итоге получить доступ к свойствам элемента. 

<!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>

1 Ответ

1 голос
/ 21 октября 2019

Вы можете увидеть рабочий пример во фрагменте ниже, я действительно только что изменил импорт, ничего больше: 

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>
...