Arbor Js - 节点Onclick？

Question

我正在使用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在我的论坛上创建一个线程启动器和回复的图表.我已经让它工作,以便id在各自的线程启动器周围显示"在轨道上".

乔木网站上的参考实际上并不是很有帮助.任何帮助深表感谢.

Answer 1

如果你看一下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;
        });

这用于控制默认节点"拖动"功能.在这里,您可以触发所需的链接.

我将链接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'}
},

然后,您可以更新mouseDown方法以触发链接(鼠标按下方法中的当前节点被"选中",因此您可以拉出链接,如 selected.node.data.link

如果您查看arbor站点的原始源以查看它们是如何完成的,它们具有一个在mouseDown事件上调用的单击函数,然后基本上执行:

 $(that).trigger({type:"navigate", path:selected.node.data.link})

(为您的目的编辑)

值得注意的是,尽管Arbor框架和演示是开放使用的,但他们的网站并非实际受版权保护,所以只有阅读以了解他们是如何做到的,不要复制它;)