2

我非常喜欢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？

4

1 回答 1

2

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 输入演示以获取完整示例。

于 2014-01-19T21:49:14.347 回答