javascript - Arbor.js 查询

Question

我一直在使用 arbor.js，需要帮助解决几个问题。我能够基于数据库创建一个图形，一个基本图形。现在，我需要做的是，单击节点并获取节点数据并将其显示在侧面。也有一个有向边。所以，问题是

1. 我的 mousedown 功能不工作。要么它完全不起作用，要么如果它起作用，当我单击一个节点时它会自动去拖动，即它被附加到鼠标上并且我无法释放它。我想做的是当我单击我需要在侧面显示节点详细信息的节点时。节点详细信息在另一个页面上，可以作为 json 检索。我的鼠标处理代码如下

   initMouseHandling:function(){
   // no-nonsense drag and drop (thanks springy.js)
   var dragged = null;
   
   // set up a handler object that will initially listen for mousedowns then
   // for moves and mouseups while dragging
   var handler = {
     clicked:function(e){
       var pos = $(canvas).offset();
       _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
       dragged = particleSystem.nearest(_mouseP);
   
       var d = document.getElementById("infoDiv");
   
       if (dragged && dragged.node !== null){
         // while we're dragging, don't let physics move the node
         dragged.node.fixed = true
       }
       ///document.getElementById('detailBox').innerHTML=selected.node.name;
   
       $(canvas).bind('mousemove', handler.dragged)
       $(window).bind('mouseup', handler.dropped)
       $(canvas).bind('mousedown', handler.clicked)    
   
       return false
     },
     dragged:function(e){
       var pos = $(canvas).offset();
       var s = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
   
       if (dragged && dragged.node !== null){
         var p = particleSystem.fromScreen(s)
         dragged.node.p = p
       }
   
       return false
     },
   
     dropped:function(e){
       if (dragged===null || dragged.node===undefined) return
       if (dragged.node !== null) dragged.node.fixed = false
       dragged.node.tempMass = 1000
       dragged = null
       $(canvas).unbind('mousemove', handler.dragged)
       $(window).unbind('mouseup', handler.dropped)
       _mouseP = null
       return false
     }
   
     clicked:function(e){
       var pos = $(this).offset();
       var p = {x:e.pageX-pos.left, y:e.pageY-pos.top}
       selected = nearest = dragged = particleSystem.nearest(p);
       var nodeAddress = "http://localhost:7474/db/data/node/" + selected.node.name;
   
       if (selected.node !== null){
       // dragged.node.tempMass = 10000
           dragged.node.fixed = false;
           //$(canvas).unbind('mousemove', handler.dragged)        
       }
       //document.getElementById('detailBox').innerHTML=selected.node.name;
       getData(nodeAddress);
       //alert(nodeData.self);
       return false;
   
     }
   }
   
   //My click function
   //$(canvas).mousedown(function(e){
   
   //});
   

   },

上面的代码根本不起作用，我也是 jQuery 的新手，因此我无法找出错误，最后点击的函数试图做的是在点击节点时获取从另一个页面获取其详细信息并显示它。这里的功能完全失败了。在我这样尝试之前，

   //My click function
    $(canvas).mousedown(function(e){
        var pos = $(this).offset();
        var p = {x:e.pageX-pos.left, y:e.pageY-pos.top}
        selected = nearest = dragged = particleSystem.nearest(p);
        var nodeAddress = "http://localhost:7474/db/data/node/" + selected.node.name;

        if (selected.node !== null){
        // dragged.node.tempMass = 10000
            dragged.node.fixed = false;
            //$(canvas).unbind('mousemove', handler.dragged)        
        }
        //document.getElementById('detailBox').innerHTML=selected.node.name;
        getData(nodeAddress);
        //alert(nodeData.self);
        return false;
    });



    // start listening
    $(canvas).mousedown(handler.clicked);

这在处理程序变量之外，javascript 运行良好，并且在侧面显示了节点号。但我无法查询并获取 json。该图也卡住了。

这个方法可以试试吗？否则我怎么能完成它。很抱歉这个大问题，以及无意中的错误格式，这是我在这里的第一篇文章。

谢谢。

Answer 1

我的处理程序的以下代码适用于我。 YMMV.

我没有使用clicked 函数，而是使用down 映射到dropped 和dragged。
我还包含了一个 move 变量，它在 dropped 函数中使用，以指示节点是实际被单击还是只是被拖动。

希望这对您有所帮助!

initMouseHandling:function(){
// no-nonsense drag and drop (thanks springy.js)
selected = null;
nearest = null;
var dragged = null;
var move = false;

// set up a handler object that will initially listen for mousedowns then
// for moves and mouseups while dragging
var handler = {
  moved:function(e){
    var pos = $(canvas).offset();
    _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top);
    nearest = particleSystem.nearest(_mouseP);

    if(!nearest.node){
        return false;
    }

    selected = (nearest.distance < nearest.node.data.radius) ? nearest : null

    // code for node that mouse is hovered on ('selected')

  },
  down:function(e){
    var pos = $(canvas).offset();
    _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
    nearest = dragged = particleSystem.nearest(_mouseP);
    move = false;

    if (dragged && dragged.node !== null){
        dragged.node.fixed = true
    }

    $(canvas).bind('mousemove', handler.dragged)
    $(window).bind('mouseup', handler.dropped)

    return false
  },
  dragged:function(e){
    var old_nearest = nearest && nearest.node._id
    var pos = $(canvas).offset();
    var s = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
    move = true;

    if (!nearest) return
    if (dragged !== null && dragged.node !== null){
      var p = particleSystem.fromScreen(s)
      dragged.node.p = p
    }

    return false
  },

  dropped:function(e){
    var edit = $("#edit").prop('checked')
    if (dragged===null || dragged.node===undefined) return
    if (dragged.node !== null) {
        if(move===false) {

            // code for clicked node (dragged.node)

        }
        dragged.node.fixed = false
    }
    dragged.node.tempMass = 1000
    dragged = null
    selected = null
    $(canvas).unbind('mousemove', handler.dragged)
    $(window).unbind('mouseup', handler.dropped)
    _mouseP = null
    return false
  }
}

$(canvas).mousedown(handler.down);
$(canvas).mousemove(handler.moved);
}