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框架和演示是开放使用的，但他们的网站并不是实际受版权保护的，所以只读它看看他们是如何做到的，不要复制它;）

Answer 2

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

基于这个问题 ，讨论如何区分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，“_ blank”）
  window.location = link。
• 以上必须替换renderer.js文件中以前的initMouseHandling函数。
• 将“dom”定义为：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
    },

您可以在此页面中查看clic和双击功能。

单击节点时添加节点和边，并在双击节点时将边添加到其他节点（ blue ， yellow和green ）

Answer 4

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

<input type=checkbox name=mycheckbox[]>