Arbor.js查询

Question

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

1. 我的鼠标关闭功能不起作用。它要么完全不能工作，要么如果它工作，当我点击一个节点，它会自动拖动，即它会被吸引到鼠标，我不能释放它。我想要做的是，当我点击节点时，我需要在旁边显示节点的详细信息。点点的细节在另一个页面上，该页面可以作为json检索。我的鼠标处理代码如下 initMouseHandling:函数(){ // no-无意义的拖放(谢谢springy.js) var拖动= null；//设置一个处理程序对象，该对象最初将侦听鼠标下移和鼠标操作，同时拖动var处理程序={ clicked:function(e){ var pos =$(画布).offset()；_mouseP =arbor.Point(e.pageX-pos.左侧，e.pageY-pos.top)被拖动= particleSystem.nearest(_mouseP)；var d= document.getElementById("infoDiv")；如果(拖动&& dragged.node !== null){ //当我们拖动时，不要让物理移动节点dragged.node.fixed = true }dragged.node.fixed$(画布).bind(‘mousemove’，handler.dragged) $(window).bind('mouseup'，handler.dropped) $(画布).bind(‘mousedown’，handler.clicked)返回false }，拖动:function(E){ var pos =$(画布).offset()；变量s=arbor.Point(e.pageX-pos.左侧，e.pageY-pos.top)如果(拖放& dragged.node !== null){ var p= particleSystem.fromScreen(s) dragged.node.p =p}返回false }，删除:函数(E){ if (dragged===null dragged.node===undefined)返回if (dragged.node !== null) dragged.node.fixed = false dragged.node.tempMass = 1000 = null $(画布).unbind(‘mousemove’，handler.dragged) $(window).unbind('mouseup'，handler.dropped) _mouseP =空返回假}单击:function(E){ var pos = $(this).offset()；var p={x:e.pageX-pos.左侧，y:e.pageY-pos.top} selected =最近= 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；//$(画布) //document.getElementById('detailBox').innerHTML=selected.node.name；.unbind(‘mousemove’，handler.dragged) } getData(nodeAddress)；//警报(nodeData.self)；返回false；} //My click function //$(画布).mousedown(函数(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函数，而是有一个映射到dropped和dragged的down。

我还包括一个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);
}