Question

我需要显示具有一系列节点的图形，这些节点之间可以有多种关系。为了能够显示每个单独的关系（边缘），我添加了ParallelEdges插件。我的问题是，当将enableEdgeHovering设置为true时，我发现鼠标悬停发生在画布上实际显示边缘的位置几个像素之外，从而使与该关系的交互变得不可能。

下面是我的代码的摘录：

<html>
    <body>
        <div id="viz"></div>
    </body>

    <script type="text/javascript" src="Scripts/sigma.min.js"></script>
    <script type="text/javascript" src="Scripts/plugins/sigma.renderers.edgeLabels.min.js"></script>
    <script type="text/javascript" src="Scripts/plugins/sigma.layout.forceAtlas2.min.js"></script>
    <script type="text/javascript" src="Scripts/plugins/sigma.renderers.parallelEdges.min.js"></script>
    <script type="text/javascript" src="Scripts/plugins/sigma.plugins.dragNodes.min.js"></script>
    <script>
      var data = myJsonPassedFromServer;

      // Initialise sigma:
      var s = new sigma(
         {
            renderer: {
               container: document.getElementById('viz'),
               type: 'canvas'
            },
            settings: {
               minEdgeSize: 0.1,
               maxEdgeSize: 2,
               minNodeSize: 1,
               maxNodeSize: 8,
               enableEdgeHovering: true,
               singleHover:true,
            }
         }
      );

      // Load the graph in sigma
      s.graph.read(data);

      // Ask sigma to draw it
      s.refresh();

      // Log the data when an edge is clicked.
      s.bind('clickEdge', function (e) {
         var edgeProperties = e.data.edge.Properties.Properties;

         if (typeof edgeProperties.objId !== "undefined" && typeof edgeProperties.lop !== "undefined") {
            var objId = edgeProperties.objId;
            var lop = edgeProperties.lop;
            var link = "Default.aspx?Dialog=true#ViewID=SCE_Pgh&ObjId=" + objId + "&LoP=" + lop;
            window.open(link);
         }
         console.log(e.data);
      });

    </script>
</html>

使用ParallelEdges插件时如何在Sigma.js中启用边缘悬停

0 个答案: