JavaScript – Arbor Js – Node Onclick?

前端之家收集整理的这篇文章主要介绍了JavaScript – Arbor Js – Node Onclick?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用 arbor.js创建一个图.

如何为节点创建一个onclick事件,或者在单击节点链接之后建立节点链接

Arborjs.org主页在点击时链接到外部页面的节点,如何复制这个节点,或者在节点点击时调用JavaScript函数

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

var data = {
    nodes:{
        threadstarter:{'color':'red','shape':'dot','label':'Animals'},reply1:{'color':'green','label':'dog'},reply2:{'color':'blue','label':'cat'}
    },edges:{
        threadstarter:{ reply1:{},reply2:{} }
    }
};
sys.graft(data);

一点上下文:
我使用arbor.js在我的论坛上创建一个线程启动器和回复的图形.
我已经工作,所以id被显示在他们各自的线程启动器周围的“轨道”.

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

解决方法

如果你看看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','label':'dog',link:'https://stackoverflow.com'},'label':'cat',link:'https://stackoverflow.com'}
},

然后,您可以更新mouseDown方法来触发链接(鼠标下方的当前节点为“selected”,以便您可以拔出链接,如selected.node.data.link

如果您查看主轴站点的原始源,以了解它们是如何完成的,那么它们具有在mouseDown事件上调用的单击函数,然后基本上是这样做的:

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

(为您的目的编辑)

值得注意的是,虽然Arbor框架和演示文稿是开放使用的,但它们的网站不是,实际上是版权所有,所以只能阅读它们,看看它们是如何做到的,不要复制它);

猜你在找的JavaScript相关文章