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[]>