Как включить наведение ребер в Sigma.js при использовании плагина ParallelEdges - PullRequest
0 голосов
/ 07 мая 2019

Мне нужно отобразить график с серией узлов, которые могут иметь несколько отношений между одним и другим. Чтобы показать каждое отношение (ребро), я добавил плагин 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>
...