Arbor Js-节点单击

我正在使用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就可以围绕各自的线程启动器"在轨道上"显示。

关于乔木地的参考资料真的没有多大帮助。非常感谢您的帮助。

如果您查看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 一样拉出链接

如果你查看乔木站点的原始来源，看看他们是如何做到的，他们有一个点击函数，在mouseDown事件中调用，然后基本上完成：

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

（为您的目的编辑）

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

使用上述解决方案（包括在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);
  }
}

正如你所看到的，

我对单击和鼠标向下处理程序函数进行了区分
我正在打开新选项卡中的链接。要简单地重定向，请更改：window.open（链接，"_blank"）for
window.location=link
以上必须替换render.js文件中以前的initMouseHandling函数
将"dom"定义为：var dom=$（canvas）
您必须添加以下css代码才能向用户提供反馈

 canvas.linkable{
   cursor: pointer;
 }

在脚本中，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）

我正在寻找类似的定制，以便对每个节点id值进行选择。如果不是鼠标处理程序触发，而是通过每个节点内的复选框进行选择，会是什么样子？

<input type=checkbox name=mycheckbox[]>

相关内容

最新更新

热门标签：