Arbor Js - Node Onclick?

Question

Sto usando arbor.js per creare un grafico.

Come faccio a creare un evento onclick per un nodo, o fare un collegamento nodo da qualche parte dopo essere stato cliccato?

La home page di Arborjs.org ha nodi che collegano a pagine esterne dopo essere stati cliccati, come posso replicarlo o fare in modo che il nodo chiami la funzione javascript dopo essere stato cliccato?

Il mio attuale nodo e bordi elenco è in questo formato:

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

Un po 'di contesto: sto usando arbor.js per creare un grafico di antipasti filo e le risposte sul mio forum. Ho funzionato in modo che gli ID siano visualizzati "in orbita" attorno al loro rispettivo avviatore di filo.

Il riferimento sul sito pergolato non è davvero molto utile. Qualsiasi aiuto è molto apprezzato.

Answer 1

Se si guarda il codice atlante demo (in github) si vedrà verso il fondo ci sono una selezione di funzioni di eventi del mouse, se si guarda a:

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

Questo viene utilizzato per controllare il nodo predefinito "trascinamento" della funzionalità. Qui puoi attivare il collegamento che desideri.

vorrei aggiungere l'URL del link al JSON nodo che si sta passando di nuovo per definire ogni nodo, così il vostro originale JSON postato diventa qualcosa di simile a:

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

Quindi, è possibile aggiornare il metodo mouseDown a grilletto il collegamento (il nodo corrente nel metodo del mouse verso il basso è "selezionato" in modo da poter estrarre il collegamento come selected.node.data.link

Se si guarda la fonte originale per il sito del pergolato per vedere come lo hanno fatto, hanno un funzione cliccata che viene chiamata su evento mouseDown e quindi essenzialmente:

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

(a cura per i vostri scopi)

Vale la pena notare che, mentre il quadro Arbor demo e sono aperti per l'uso, la loro isnt sito ed è in realtà protetto da copyright, in modo che solo letto che per vedere come hanno fatto esso, Non copiare;)

Answer 2

Nello script renderer.js è il gestore per gli eventi del mouse, in modo da poter aggiungere il codice per creare le vostre funzioni.

ho modificato il renderer.js per aggiungere le funzioni di clic e doppio clic.

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

è possibile controllare le funzioni di Clic e fare doppio clic in questo page.

aggiungo nodi e spigoli quando un nodo è stato fatto clic e aggiungere bordi per altri nodi quando il nodo è stato doppio clic (i blue, yellow e green quelli)

Answer 3

Con le soluzioni sopra (compreso il uno implementato a www.arborjs.org), anche se i nodi possono aprire collegamenti quando si fa clic, anche loro perdono la capacità di essere trascinati.

Sulla base di un tale question, che discute come distinguere tra trascinando e facendo clic su eventi in JS, ho scritto il seguente:

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

    } 

} 

Come si può vedere,

• ho fatto la differenza tra le funzioni del gestore cliccato e del gestore del mouse.
• Sto aprendo i collegamenti in nuove schede. Per reindirizzare semplicemente, modificare: window.open (collegamento, "_blank") per
  window.location = collegamento.
• Quanto sopra deve sostituire la precedente funzione initMouseHandling nel file renderer.js.
• Definire "dom" come: var dom = $ (tela)
• È necessario aggiungere il seguente codice css per fornire un feedback all'utente.

canvas.linkable{ 
    cursor: pointer; 
} 

Answer 4

Sto cercando personalizzazione simile per la selezione su ciascun valore del nodo id. Come sarebbe se al posto del trigger del gestore del mouse, la selezione fosse effettuata tramite checkbox all'interno di ciascun nodo?

<input type=checkbox name=mycheckbox[]>