javascript - Arbor Js - 节点点击？

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 显示在它们各自的线程启动器周围的“轨道上”。

arbor 站点上的引用资料确实帮助不大。非常感谢任何帮助。

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方法来触发链接(mouse down方法中的当前节点是“selected”所以​​你可以拉出链接像selected.node.data.link

如果您查看 arbor 网站的原始来源以了解他们是如何做到的，他们有一个在 mouseDown 事件上调用的点击函数，然后基本上执行:

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

(为您的目的编辑)

值得注意的是，虽然 Arbor 框架和演示是开放使用的，但他们的网站并没有而且实际上是受版权保护的，所以只阅读他们是如何做到的，不要复制它;)