Arbor Js - Node Onclick？ [英] Arbor Js - Node Onclick?

问题描述

我使用 arbor.js 创建图表。

如何为节点创建 onclick 事件，或者在点击节点链接后在某处创建？

Arborjs.org主页具有在点击时链接到外部页面的节点，如何复制此节点，或者在点击节点时调用JavaScript函数？

我当前的节点和边缘列表采用以下格式：

  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）; 
  

有点上下文：
我使用arbor.js创建一个图形线程启动器和回复在我的论坛。

在乔木网站上的引用真的不是很多帮助。

如果你看看atlas演示代码（在 https://github.com/samizdatco/arbor/tree/master/demos/atlas\">github ），你会看到底部有一些选择的鼠标事件函数，如果你看看：

  $（canvas）.mousedown（function（e）{
 var pos = $（this）.offset b $ b 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; 
}）; 
  

这用于控制默认节点拖动功能。在这里你可以触发你想要的链接。

我将添加链接URL到节点json，你传回来定义每个节点，所以你原来的JSON发布变成如下：

 节点：{
 threadstarter：{'color'：'red'，'shape' 'dot'，'label'：'Animals'}，
 reply1：{'color'：'green'，'shape'：'dot'，'label'：'dog' /stackoverflow.com'}，
 reply2：{'color'：'blue'，'shape'：'dot'，'label'：'cat'，link：'http：//stackoverflow.com'}然后，您可以更新mouseDown方法以触发链接（当前值为
}，
  

$ b <节点在选择，所以你可以拉出像 selected.node.data.link

如果你查看乔木网站的原始来源，看看他们是如何做到的，他们有一个clicked函数，在mouseDown事件调用，然后实质上：

  $（that）.trigger（{type：navigate，path：selected.node.data.link}）
  pre> 
 
 
（为您的目的编辑）
 
 
 
值得注意的是，虽然Arbor框架和演示是开放的使用，他们的网站isnt，实际上是受版权保护，所以只读它，看看他们是如何做到，不要复制它;）
 
I'm using arbor.js to create a graph.

How do I create an onclick event for a node, or make a node link somewhere upon being clicked?

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?

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.

The reference on the arbor site is really not very helpful.
Any help is much appreciated.
解决方案
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:
$(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:
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

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: 
 $(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 Js  -  Node Onclick？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！