Mappa concettuale Rete - Nodo Numero

Question

Sto tentando di implementare il grafico di rete della mappa concettuale utilizzando d3.js. L'esempio del grafico è disponibile qui nel js-fiddle.

js-fiddle

direzione Il nodo punta da solo la direzione sinistra. Tutti i nodi in una parte destra con le linee dalla parte posteriore del rettangolo. Voglio visualizzare tutti i nodi a sinistra ea destra.

Grafico atteso:

Answer 1

Ho trovato la soluzione controllando la posizione della curva utilizzando questo codice.

if(af.x>180) 
{ 
    af.xOffset = -S; 
}else 
{ 
    af.xOffset = S; 
} 

e controllando la condizione per funzione push

if (ab.x > 180) { 
        H.push({ 
         source: ae, 
         target: ab, 
         key: aa, 
         canonicalKey: aa, 
         x1: ae.x + (ab.type === "theme" ? 0 : U), 
         y1: ae.y + K/2, 
         x2: Math.cos(Y) * X + ab.xOffset, 
         y2: Math.sin(Y) * X 
        }) 
       } 
       else if (ae.x < 180) { 
        H.push({ 
         source: ae, 
         target: ab, 
         key: aa, 
         canonicalKey: aa, 
         x1: ae.x + (ab.type === "theme" ? U : 0), 
         y1: ae.y + K/2, 
         x2: Math.cos(Y) * X + ab.xOffset, 
         y2: Math.sin(Y) * X 
        }) 
       } 

Output previsto era

Answer 2

Il problema che stai avendo è che i collegamenti dei nodi si uniscono verso l'angolo in alto a sinistra. di quella colonna centrale.

è necessario:

1. trovare la fonte di tutti i link che vanno a destra.
2. Offset della posizione x di origine in base alla larghezza della colonna centrale.

È possibile che la fonte e il destinatario siano confusi. Il codice sembra parzialmente minorato, quindi è piuttosto difficile da leggere.

È possibile ottenere la larghezza di un elemento in modo relativamente semplice (Example).

È possibile riconoscere se un collegamento deve essere modificato confrontando le posizioni x di origine e di destinazione.

In alternativa, è possibile esaminare i nodi che si collegano a qualcosa che si trova sul lato destro, che potrebbe risultare leggermente più complesso ma riconoscere i collegamenti che necessitano di modifiche più accurate.

EDIT:

Si potrebbe anche provare il legame con il centro del nodo, invece che l'angolo.