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

如果您查看地图集演示代码（在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框架和演示是开放使用的，但他们的网站并非实际受版权保护，所以只有阅读以了解他们是如何做到的，不要复制它;）

Answer 2

使用上述解决方案（包括在www.arborjs.org实施的解决方案）虽然节点可以在点击时打开链接，但它们也会失去被拖动的能力。

基于这个question，讨论如何区分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);

  }

}

如您所见，

我在clicked和mousedown处理函数之间做了区别。
我在新标签中打开链接。要简单地重定向，请更改： window.open（link，＆＃34; _blank＆＃34;）用于
window.location = link。
以上内容必须替换renderer.js文件中以前的initMouseHandling函数。
定义＆＃34; dom＆＃34; as：var dom = $（canvas）
您必须添加以下css代码才能向用户提供反馈。

 canvas.linkable{
   cursor: pointer;
 }

Answer 3

在脚本renderer.js中是鼠标事件的处理程序，因此您可以添加代码来创建函数。

我修改了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
    },

您可以查看此page中的clic和双击功能。

单击节点时添加节点和边，并在双击节点时向其他节点添加边（blue，yellow和green个节点

Answer 4

我正在寻找类似的自定义来选择每个节点的id值。如果不是鼠标处理程序触发器，那么如何通过每个节点内的复选框进行选择？

<input type=checkbox name=mycheckbox[]>

Arbor Js - 节点Onclick？

4 个答案: