javascript - VivagraphJS、WebGL 和事件监听器

Question

我绝对喜欢Vivagraph JS 。话虽如此，我遇到了一个难题，这可能是 WebGL 特有的。

我正在尝试:

  var graph = Viva.Graph.graph();

  var layout = Viva.Graph.Layout.forceDirected(graph, {
    springLength : 30,
    springCoeff : 0.0003,
    dragCoeff : 0.005,
    gravity : -0.2,
    theta: 0.8
  });

  var graphics = Viva.Graph.View.webglGraphics();
  graphics.node( function( node )
  { 
    node.addEventListener( 'click', function ()
    { 
      console.log( 'clicked node: ' + node.id ); 
    });

    return Viva.Graph.View.webglSquare( 10, color );
  });

  var renderer = Viva.Graph.View.renderer( graph,
  { 
    container  : document.getElementById( 'graph' ),
    graphics : graphics, 
    layout: layout 
  });

  renderer.run();

我见过类似的示例，但使用了 SVG。 使用 WebGL 似乎不起作用:

Uncaught TypeError: Object [object Object] has no method 'addEventListener' 

如何将来自 javascript/jquery 的事件监听器添加到构成节点的 webgl 粒子？

或者我应该为了我的意图和目的而完全放弃 WebGL？

Answer 1

WebGL 通常没有内置的事件支持。 VivaGraph 在其之上提供了一个包装器，让您可以监听事件。我对其实现并不满意，但它确实有效:

var events = Viva.Graph.webglInputEvents(webGLGraphics, graph);

events.mouseEnter(function (node) {
    console.log('Mouse entered node: ' + node.id);
}).mouseLeave(function (node) {
    console.log('Mouse left node: ' + node.id);
}).dblClick(function (node) {
    console.log('Double click on node: ' + node.id);
}).click(function (node) {
    console.log('Single click on node: ' + node.id);
});

您还可以查看WebGL Input完整示例演示。