Arbor.js queries

Arbor.js queries

本文关键字:queries js Arbor      更新时间:2023-09-26

我一直在用arbor.js工作,需要一些问题的帮助。我能够基于数据库创建一个图表,一个基本的图表。现在,我需要做的是,单击节点,获取节点数据,并将其显示在旁边。也有有向边。问题是

  1. 我的鼠标按下功能不工作。要么它完全不起作用,要么它起作用,当我点击一个节点时,它会自动拖动,也就是说,它附着在鼠标上,我不能释放它。我想做的是,当我单击节点时,我需要在侧面显示节点详细信息。节点的详细信息在另一个页面上,可以作为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。这张图也被点卡住了。

是这样尝试的吗?不然我怎么能把它做完呢?很抱歉问了这么大的问题,而且无意中出现了错误的格式,这是我在这里的第一个帖子。

谢谢。

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

没有clicked函数,我有一个映射到droppeddraggeddown
我还包含了一个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);
}