Arbor Js - Node Onclick?

Question

Estoy usando arbor.js para crear un gráfico.

¿Cómo creo un evento onclick para un nodo, o hago un enlace de nodo en algún lugar al hacer clic en él?

La página de inicio de Arborjs.org tiene nodos que enlazan con páginas externas al hacer clic en ellas, ¿cómo las replico o hacen que el nodo invoque la función javascript al hacer clic?

Mi nodo y bordes actual inclusión es en este 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 poco de contexto: estoy usando arbor.js para crear un gráfico de entrantes tema y las respuestas en mi foro. Lo tengo funcionando para que los identificadores se muestren "en órbita" alrededor de su respectivo enhebrador de hilo.

La referencia en el sitio del árbol no es muy útil. Cualquier ayuda es muy apreciada.

Answer 1

Si nos fijamos en el código de demostración Atlas (en github) se verá hacia la parte inferior hay una selección de funciones de eventos de ratón, si nos fijamos en:

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

Esto se utiliza para controlar el funcionalidad de "arrastrar" del nodo por defecto. Aquí puede activar el enlace que desea.

me gustaría añadir la URL del enlace a la JSON nodo que está de paso volver a definir cada nodo, por lo que su JSON original, publicado se convierte en algo así como:

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

A continuación, puede actualizar el método mouseDown al gatillo el enlace (el nodo actual en el método del mouse hacia abajo está "seleccionado" para que pueda extraer el enlace como selected.node.data.link

Si mira la fuente original del sitio del árbol para ver cómo lo han hecho, tienen un hizo clic en la función que se invoca en el evento mouseDown y esencialmente lo hace:

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

(editado para sus propósitos)

Vale la pena señalar que, si bien el marco Arbor y demostraciones están abiertas para su uso, su sitio isnt y en realidad es con derechos de autor, por lo que sólo lectura que ver cómo lo han hecho , no lo copie;)

Answer 2

En el script renderer.js es el controlador de los eventos del mouse, por lo que puede agregar el código para crear sus funciones.

Modifiqué el renderer.js para agregar las funciones de hacer clic y hacer doble 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 
    }, 

Puede comprobar las funciones Clic y haga doble clic en este page.

I añadir nodos y los bordes cuando un nodo se ha hecho clic y añadir bordes a otros nodos cuando el nodo ha sido doble clic (los blue, yellow y green unos)

Answer 3

Con las soluciones anteriores (incluyendo el uno implementado en www.arborjs.org) aunque los nodos pueden abrir enlaces al hacer clic, también pierden su capacidad de ser arrastrados.

Basado en un presente question, que discute cómo distinguir entre arrastrando y haciendo clic en eventos en JS, me escribió lo siguiente:

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

    } 

} 

Como se puede ver,

• hice una diferencia entre las funciones del controlador clicked y mousedown.
• Estoy abriendo enlaces en pestañas nuevas. Para redirigir simplemente, cambie: window.open (link, "_blank") para
  window.location = link.
• Lo anterior debe reemplazar su función anterior initMouseHandling en el archivo renderer.js.
• Define "dom" como: var dom = $ (canvas)
• Tienes que agregar el siguiente código CSS para enviar comentarios al usuario.

canvas.linkable{ 
    cursor: pointer; 
} 

Answer 4

Estoy buscando para personalizar similar para selección sobre cada valor de ID de nodo. ¿Cómo sería si en lugar del desencadenador del manejador de mouse, la selección se realizara a través de la casilla dentro de cada nodo?

<input type=checkbox name=mycheckbox[]>