Arbor.js queries
Arbor.js queries
我一直在用arbor.js工作,需要一些问题的帮助。我能够基于数据库创建一个图表,一个基本的图表。现在,我需要做的是,单击节点,获取节点数据,并将其显示在旁边。也有有向边。问题是
-
我的鼠标按下功能不工作。要么它完全不起作用,要么它起作用,当我点击一个节点时,它会自动拖动,也就是说,它附着在鼠标上,我不能释放它。我想做的是,当我单击节点时,我需要在侧面显示节点详细信息。节点的详细信息在另一个页面上,可以作为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
函数,我有一个映射到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);
}
相关文章:
- 可以't让我的if语句处理js中的html表单输入
- 使用agility.js进行页面布局和合成
- 使用Clipboard.js复制span文本
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 强制模板刷新ember.js
- 如何编写HTML输入的JS内联
- Angular JS IE9 Hashbang url rewriting
- 使用JS将数组转换为json对象
- Node.js v6.2.0类扩展不是函数错误
- 当js函数's已执行
- 要求未定义JS回调参数
- 在自定义mean.io包中使用angular-chart.js作为依赖项
- 无法在数据endVal中设置值=“”;{{ucount}}”;使用Angular JS的CountUp
- 如何从Java/scala调用js美化程序
- 如何更改<svg>标记为<img>用js标记
- 如何使用 node.js 比较两个 json 数组
- chrome扩展:尽管运行了at:documentidle,js脚本还是过早启动
- 节点Js:How to catch a“;没有这样的文件或目录“;读取线模块出错
- Selectize.js:如何对整数值的选项进行排序
- Arbor.js queries