javascript Arbor Js - 节点 Onclick？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9489271/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Arbor Js - Node Onclick?
提问by Eric Bernd
I'm using arbor.jsto create a graph.
我正在使用arbor.js创建图表。
How do I create an onclickevent for a node, or make a node link somewhere upon being clicked?
如何onclick为节点创建事件，或在单击时在某处创建节点链接？
The Arborjs.org homepage has nodes which link to external pages upon being clicked, how do I replicate this, or make the node call javascript function upon being clicked?
Arborjs.org 主页具有在被点击时链接到外部页面的节点，我如何复制它，或者让该节点在被点击时调用 javascript 函数？
My current node and edges listing is in this format:
我当前的节点和边列表采用以下格式：
var data = {
nodes:{
threadstarter:{'color':'red','shape':'dot','label':'Animals'},
reply1:{'color':'green','shape':'dot','label':'dog'},
reply2:{'color':'blue','shape':'dot','label':'cat'}
},
edges:{
threadstarter:{ reply1:{}, reply2:{} }
}
};
sys.graft(data);
A bit of context: I'm using arbor.js to create a graph of thread starters and replies on my forum. I've got it working so that id's are displayed 'in orbit' around their respective thread starter.
一些上下文：我正在使用 arbor.js 在我的论坛上创建线程启动器和回复的图表。我已经让它工作了，以便 id 显示在它们各自的线程启动器周围的“轨道”中。
The reference on the arbor site is really not very helpful. Any help is much appreciated.
arbor 网站上的参考真的不是很有帮助。任何帮助深表感谢。
采纳答案by rhinds
If you look at the atlas demo code (in github) you will see towards the bottom there are a selection of mouse event functions, if you look at:
如果您查看 atlas 演示代码（在github 中），您将看到底部有一系列鼠标事件函数，如果您查看：
$(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);
if (selected.node !== null){
// dragged.node.tempMass = 10000
dragged.node.fixed = true;
}
return false;
});
This is being used to control the default node "dragging" functionality. In here you can trigger the link you want.
这用于控制默认节点“拖动”功能。在这里你可以触发你想要的链接。
I would add the link URL to the node json that you are passing back to define each node, so your original JSON posted becomes something like:
我会将链接 URL 添加到您传回的节点 json 以定义每个节点，因此您发布的原始 JSON 变得类似于：
nodes:{
threadstarter:{'color':'red','shape':'dot','label':'Animals'},
reply1:{'color':'green','shape':'dot','label':'dog', link:'http://stackoverflow.com'},
reply2:{'color':'blue','shape':'dot','label':'cat', link:'http://stackoverflow.com'}
},
Then, you can update the mouseDown method to trigger the link (the current node in the mouse down method is "selected" so you can pull out the link like selected.node.data.link
然后，您可以更新 mouseDown 方法以触发链接（鼠标按下方法中的当前节点被“选中”，因此您可以像这样拉出链接 selected.node.data.link
If you look at the original source for the arbor site to see how they have done it, they have a clicked function that is called on mouseDown event and then essentially does:
如果您查看 arbor 站点的原始来源以了解他们是如何做到的，他们有一个 clicked 函数，该函数在 mouseDown 事件上调用，然后基本上执行以下操作：
$(that).trigger({type:"navigate", path:selected.node.data.link})
(edited for your purposes)
（为您的目的编辑）
It is worth noting that whilst the Arbor framework and demos are open for use, their site isnt and is actually copyrighted, so only read that to see how they have done it, dont copy it ;)
值得注意的是，虽然 Arbor 框架和演示是开放使用的，但他们的网站并没有并且实际上受版权保护，所以只阅读它以了解他们是如何做到的，不要复制它;)
回答by istern
With the above solutions (including the one implemented at www.arborjs.org) although nodes can open links when clicked, they also lose their ability to be dragged.
使用上述解决方案（包括在www.arborjs.org实施的解决方案），虽然节点可以在单击时打开链接，但它们也失去了被拖动的能力。
Based on a this question, that discusses how to distinguish between dragging and clicking events in JS, I wrote the following:
基于讨论如何区分 JS 中的拖动和点击事件的这个问题，我写了以下内容：
initMouseHandling:function(){
// no-nonsense drag and drop (thanks springy.js)
selected = null;
nearest = null;
var dragged = null;
var oldmass = 1
var mouse_is_down = false;
var mouse_is_moving = false
// set up a handler object that will initially listen for mousedowns then
// for moves and mouseups while dragging
var handler = {
mousemove:function(e){
if(!mouse_is_down){
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 < 50) ? nearest : null
if(selected && selected.node.data.link){
dom.addClass('linkable')
} else {
dom.removeClass('linkable')
}
}
return false
},
clicked: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 < 50) ? nearest : null
if (nearest && selected && nearest.node===selected.node){
var link = selected.node.data.link
if (link.match(/^#/)){
$(that).trigger({type:"navigate", path:link.substr(1)})
}else{
window.open(link, "_blank")
}
return false
}
},
mousedown:function(e){
var pos = $(canvas).offset();
_mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
selected = nearest = dragged = particleSystem.nearest(_mouseP);
if (dragged.node !== null) dragged.node.fixed = true
mouse_is_down = true
mouse_is_moving = false
$(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)
mouse_is_moving = true
if (!nearest) return
if (dragged !== null && 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 = 50
dragged = null
selected = null
$(canvas).unbind('mousemove', handler.dragged)
$(window).unbind('mouseup', handler.dropped)
_mouseP = null
if(mouse_is_moving){
// console.log("was_dragged")
} else {
handler.clicked(e)
}
mouse_is_down = false
return false
}
}
$(canvas).mousedown(handler.mousedown);
$(canvas).mousemove(handler.mousemove);
}
}
As you can see,
如你看到的，
- I made a difference between the clicked and mousedown handler functions.
- I am opening links in new tabs. To simply redirect, change:
window.open(link, "_blank") for
window.location = link. - The above must replace your previous initMouseHandling function in the renderer.js file.
- Define "dom" as: var dom = $(canvas)
- You have to add the following css code to give feedback to the user.
- 我对 clicked 和 mousedown 处理函数做了区分。
- 我正在新标签页中打开链接。要简单地重定向，请将：window.open(link, "_blank") 更改为
window.location = link。 - 以上必须替换您之前在 renderer.js 文件中的 initMouseHandling 函数。
- 将“dom”定义为：var dom = $(canvas)
- 您必须添加以下 css 代码才能向用户提供反馈。
canvas.linkable{
cursor: pointer;
}
回答by Marcelo Junior Carvalho
I′m looking for similar customization for selection over each node id value. How would it be if instead of mouse-handler trigger, the selection was made via checkbox inside each node?
我正在寻找类似的自定义来选择每个节点 id 值。如果不是鼠标处理程序触发器，而是通过每个节点内的复选框进行选择，会怎样？
<input type=checkbox name=mycheckbox[]>
回答by Hugoedin
In the script renderer.jsis the handler for the mouse events, so you can add your code to create your functions.
脚本中renderer.js是鼠标事件的处理程序，因此您可以添加代码来创建函数。
I modified the renderer.jsto add the click and double-click functions.
我修改了renderer.js添加点击和双击功能。
var handler = {
clicked:function(e){
var pos = $(canvas).offset();
_mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
selected = nearest = dragged = particleSystem.nearest(_mouseP);
if (dragged.node !== null) dragged.node.fixed = true
$(canvas).bind('mousemove', handler.dragged)
$(window).bind('mouseup', handler.dropped)
$(canvas).bind('mouseup', handler.mypersonalfunction)
},
mypersonalfunction:function(e){
if (dragged===null || dragged.node===undefined) return
if (dragged.node !== null){
dragged.node.fixed = false
var id=dragged.node.name;
alert('Node selected: ' + id);
}
return false
},
You can check the clic and double-click functions in this page.
您可以在此页面查看单击和双击功能。
I add nodes and edges when a node has been clicked and I add edges to other nodes when the node has been double-clicked (the blue,yellowand greenones)
单击节点时添加节点和边，双击节点时将边添加到其他节点（blue、yellow和green）
