Arbor Js - Node Onclick?

Question

Tôi đang sử dụng arbor.js để tạo biểu đồ.

Làm cách nào để tạo sự kiện onclick cho một nút hoặc tạo liên kết nút ở đâu đó khi được nhấp?

Trang chủ Arborjs.org có các nút liên kết đến các trang bên ngoài khi được nhấp, làm cách nào để sao chép điều này hoặc thực hiện chức năng javascript của cuộc gọi nút khi được nhấp?

nút và các cạnh niêm yết hiện tại của tôi là ở định dạng này:

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); 

Một chút bối cảnh: Tôi đang sử dụng arbor.js để tạo ra một đồ thị của người mới bắt đầu chủ đề và trả lời trên diễn đàn của tôi. Tôi đã làm cho nó hoạt động sao cho các id được hiển thị 'trong quỹ đạo' xung quanh bộ khởi động luồng tương ứng của chúng.

Tài liệu tham khảo trên trang web arbor thực sự không hữu ích lắm. Bất kỳ trợ giúp nào được đánh giá cao.

Answer 1

Nếu bạn nhìn vào mã atlas bản demo (trong github) bạn sẽ thấy hướng về phía dưới có một lựa chọn các chức năng sự kiện chuột, nếu bạn nhìn vào:

$(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; 
     }); 

này đã được sử dụng để kiểm soát nút mặc định "kéo" chức năng. Ở đây bạn có thể kích hoạt liên kết bạn muốn.

tôi sẽ thêm URL liên kết đến json nút mà bạn đang đi qua lại để xác định mỗi nút, vì vậy JSON gốc của bạn được đăng trở thành một cái gì đó như:

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'} 
}, 

Sau đó, bạn có thể cập nhật các phương pháp mouseDown để kích hoạt liên kết (nút hiện tại trong phương thức chuột xuống là "đã chọn" để bạn có thể kéo liên kết ra như selected.node.data.link

Nếu bạn nhìn vào nguồn gốc của trang web để xem cách họ đã thực hiện, họ có chức năng nhấp được gọi trên sự kiện mouseDown và về cơ bản là:

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

(sửa cho mục đích của bạn)

Điều đáng chú ý là trong khi khuôn khổ Arbor và demo được mở để sử dụng, isnt trang web của họ và thực sự là có bản quyền, vì vậy chỉ đọc mà để xem cách họ đã làm nó, không sao chép nó;)

Answer 2

Trong tập lệnh renderer.js là trình xử lý sự kiện chuột, vì vậy bạn có thể thêm mã của mình để tạo các chức năng của mình.

Tôi đã sửa đổi renderer.js để thêm các chức năng nhấp và nhấp đúp.

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 
    }, 

Bạn có thể kiểm tra các chức năng clic và nhấp đúp trong page này.

tôi thêm nút và các cạnh khi một nút được nhấp và tôi thêm cạnh để nút khác khi các nút đã được đúp nhấp (các blue, yellow và green người)

Answer 3

Với các giải pháp trên (bao gồm cả một thực hiện tại www.arborjs.org) mặc dù các nút có thể mở các liên kết khi được nhấp, chúng cũng có thể bị mất khả năng bị kéo của chúng.

Dựa trên một question này, mà thảo luận làm thế nào để phân biệt giữa cách kéo và nhấp sự kiện trong JS, tôi đã viết như sau:

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); 

    } 

} 

Như bạn thấy,

• tôi đã thực hiện một sự khác biệt giữa các hàm xử lý được nhấp và mousedown.
• Tôi đang mở liên kết trong các tab mới. Để chỉ chuyển hướng, hãy thay đổi: window.open (liên kết, "_blank") cho
  window.location = link.
• Ở trên phải thay thế hàm initMouseHandling trước đó của bạn trong tệp renderer.js.
• Xác định "dom" là: var dom = $ (canvas)
• Bạn phải thêm mã css sau đây để cung cấp phản hồi cho người dùng.

canvas.linkable{ 
    cursor: pointer; 
} 

Answer 4

Tôi đang tìm kiếm tùy chỉnh tương tự cho lựa chọn trên mỗi giá trị id nút. Nó sẽ như thế nào nếu thay vì kích hoạt trình xử lý chuột, lựa chọn được thực hiện thông qua hộp kiểm bên trong mỗi nút?

<input type=checkbox name=mycheckbox[]>