Agregar etiqueta a los bordes en arbor.js (complemento de consulta)

Question

Cómo agrego etiquetas a los bordes en arbor.js Es una biblioteca de visualización de gráficos.

Supongamos que A y B son los nodos y E es el borde Una forma cruda se inserta un "nodo de texto" T y se unen en la tuberculosis y

pero no quieren esto, ¿hay alguna ¿Otra manera?

Aquí está el código de ejemplo

var theUI = { 
    nodes:{A:{color:"red", shape:"dot", alpha:1}, 
     B:{color:"#b2b19d", shape:"dot", alpha:1}, 
     C:{color:"#b2b19d", shape:"dot", alpha:1}, 
     D:{color:"#b2b19d", shape:"dot", alpha:1}, 
    }, 
    edges:{ 
     A:{ 
      B:{length:.8}, 
      C:{length:.8}, 
      D:{length:.8} 
      } 
    } 
} 

var sys = arbor.ParticleSystem() 
sys.parameters({stiffness:900, repulsion:2000, gravity:true, dt:0.015}) 
sys.renderer = Renderer("#sitemap") 
sys.graft(theUI) 

En esto, A está conectado a B, C y D. Cómo suministro de etiquetas a los bordes?

Answer 1

arbor.js le permite escribir un código para representar todo el gráfico. Puede hacer lo que quiera en el método de renderizado, incluidos los títulos de bordes de dibujo, que puede almacenar en un mapa separado.

método de reemplazo sólo rinde en Procesador de esta manera:

redraw:function() 
{ 
    ctx.fillStyle = "white"; 
    ctx.fillRect (0,0, canvas.width, canvas.height); 

    particleSystem.eachEdge (function (edge, pt1, pt2) 
    { 
     ctx.strokeStyle = "rgba(0,0,0, .333)"; 
     ctx.lineWidth = 1; 
     ctx.beginPath(); 
     ctx.moveTo (pt1.x, pt1.y); 
     ctx.lineTo (pt2.x, pt2.y); 
     ctx.stroke(); 

     ctx.fillStyle = "black"; 
     ctx.font = 'italic 13px sans-serif'; 
     ctx.fillText (edge.data.name, (pt1.x + pt2.x)/2, (pt1.y + pt2.y)/2); 

    }); 

    particleSystem.eachNode (function (node, pt) 
    { 
     var w = 10; 
     ctx.fillStyle = "orange"; 
     ctx.fillRect (pt.x-w/2, pt.y-w/2, w,w); 
     ctx.fillStyle = "black"; 
     ctx.font = 'italic 13px sans-serif'; 
     ctx.fillText (node.name, pt.x+8, pt.y+8); 
    });  
    }; 

Este código se espera propiedad de datos de cada borde para ser llenado, mientras que la inicialización.

creo que todos los nodos y los bordes de forma manual utilizando mi mapa personalizado y métodos addNode/addEdge, bu supongo que se puede cambiar un poco su código para inicializar los bordes con los datos personalizados de esta manera:

var theUI = { 
    nodes:{A:{color:"red", shape:"dot", alpha:1}, 
     B:{color:"#b2b19d", shape:"dot", alpha:1}, 
     C:{color:"#b2b19d", shape:"dot", alpha:1}, 
     D:{color:"#b2b19d", shape:"dot", alpha:1}, 
    }, 
    edges:{ 
     A:{ 
      B:{length:.8, data:{name:"A->B"}}, 
      C:{length:.8, data:{name:"A->C"}}, 
      D:{length:.8, data:{name:"A->D"}} 
      } 
    } 
}

PS: tomar un vistazo a this example, aprendí mucho de eso.

Answer 2

edge.data es {length:.8, data:{name:"A->B"}} tanto en lugar de la última línea del método particleSystem.eachEdge() con el siguiente código

ctx.fillText (edge.data.data.name, (pt1.x + pt2.x)/2, (pt1.y + pt2.y)/2);

que funcionó para mí.