西格玛.js : Is there a way to drag one node individually

Question

我试图通过获取鼠标位置来单独拖动一个节点，因为它似乎被整个图形抓取行为所捕获。
所选节点的属性被正确修改，但其他节点一起移动，即使我设置了 n.x 和 n.y。

这是我的尝试:
http://jsfiddle.net/blt909/yhk3b/

jQuery(document).ready(function(){
   var sigRoot = document.getElementById('sig');
   var sigInst = sigma.init(sigRoot).position(0, 0, 1);
   var mousePos = {};
   $(document).mousemove(function(e){
       var $div = $("#sig");
       mousePos = {
           x: e.pageX,
           y: e.pageY
       };
   });   

    function onNodeDown(evt) {
        var sigmajs = evt.target;
        var nodeId = evt.content[0];
        sigmajs.iterNodes(function(n){
            n.size = 5;
            n.color = "#0000FF";
            n.displayX = mousePos.x;
            n.displayY = mousePos.y;
            console.log(n);
       },[nodeId]);    

       sigmajs.draw(2,2,2, false);

       sigmajs.refresh();
    };

    sigInst.graphProperties({
        minNodeSize: 2,
        maxNodeSize: 5
    });

    sigInst.addNode('000',{
        label: '000',
        color: '#000000',
          x: Math.random() * 100,
          y: Math.random() * 100
    }).addNode('111',{
        label: '111',
        color: '#111111',
          x: Math.random() * 100,
          y: Math.random() * 100
    }).addNode('222',{
        label: '222',
        color: '#222222',
          x: Math.random() * 100,
          y: Math.random() * 100
    }).addEdge('111222','111','222')
      .addEdge('111000','111','000');

      sigInst.bind('downnodes',onNodeDown);

      sigInst.draw();
  })

有没有人在 sigma.js 上尝试过同样的技巧？

谢谢你的帮助

Answer 1

新的 sigma.js 有一个 dragNodes插件 sigma.plugins.dragNodes.js但它仅适用于 Canvas ，只需包含插件文件并传递 sigma 对象:

<script src="./plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js"></script>

let dragListener = sigma.plugins.dragNodes(sigInst, sigInst.renderers[0])