javascript - 在Sigma.js中加载JSON文件但无法绑定(bind)overEdge事件

Question

我想从 JSON 文件加载一些数据并在 Sigma.js 中绘制它们的图表，并将 overEdge 和 outEdge 事件与所有边绑定(bind)。我阅读了官方文档中的一些示例，并解决了当我想在代码中绑定(bind) overNode 事件时的问题，但使用绑定(bind) overEdge 事件的相同方法不起作用。这是我的代码:

<script>

sigma.parsers.json(
    '../data/data.json', 
    {
        container: 'graph-container',
        type: 'canvas',
        settings: {
            defaultNodeColor: '#ec5148',
            enableEdgeHovering: true,
            edgeHoverColor: 'edge',
            defaultEdgeHoverColor: '#000',
            edgeHoverSizeRatio: 1,
            edgeHoverExtremities: true,
        }
    },
    function(s) {         
        s.graph.nodes().forEach(function(n) {
            s.bind('overNode', 
                function(e) {
                    alert("node");
                }
            );  
        });

        s.graph.edges().forEach(function(n) {
            s.bind('overEdge', 
                function(e) {
                    alert('edge');                                          
                }
            );
        });
    }
);

</script>

当我运行我的代码时，似乎

enableEdgeHovering: true,

犯了一些错误，例如

Uncaught Error: The edge events feature is not compatible with the WebGL renderer

但是当我删除它时，我的边缘无法绑定(bind)事件。我看到官方示例做了同样的事情，他们的代码可以在我的浏览器上运行，但我的代码不能。

Answer 1

可能它实际上不适合你。这是我的项目的工作示例:

  <div id="container">
  <style>
    #graph-container {
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      position: absolute;
    }
  </style>
  <div id="graph-container"></div>
</div>
<script>
  s = new sigma({
    graph: 0,
    container: 'graph-container',
      renderer: {
        container: document.getElementById('graph-container'),
        type: 'canvas'
      },
      settings: {
            doubleClickEnabled: false,
            minEdgeSize: 0.5,
            maxEdgeSize: 4,
            enableEdgeHovering: true,
            edgeHoverColor: '#000',
            defaultEdgeHoverColor: 'red',
            edgeHoverSizeRatio: 1,
            edgeHoverExtremities: true,
            defaultEdgeLabelSize: 20,
            edgeLabelSize: 'proportional',
            minArrowSize: 10,
      }
  });
  sigma.parsers.json('data/arctic.json', s);
  s.bind('overNode outNode clickNode doubleClickNode rightClickNode', function(e) {
    console.log(e.type, e.data.node.label, e.data.captor);
  });
</script>