Grafico orientamento e posizionamento nodo in d3.js

Question

Grazie a questa prima question, ho prodotto un grafico a layout fisso statico come di seguito utilizzando la layout forza in d3.js:

e ho due domande specifiche ulteriore personalizzazione del layout:

Innanzitutto, noto che l'inizializzazione delle posizioni dei nodi in modo deterministico (ad esempio eseguita in diagonale qui, vedere script per i dettagli) corregge le posizioni dei nodi e l'orientamento dei nodi sembra dipendere da questa inizializzazione come noi ll come le dimensioni del grafico della forza *. Mi chiedo come posso rendere i nodi A, D, E, F, I nel grafico sopra allineati orizzontalmente? In altre parole, voglio girare l'orientamento del grafico in senso antiorario per circa 45 gradi. Ho cercato di inizializzare i nodi orizzontalmente nel mezzo:

nodes.forEach(function(d, i) { d.x = w/size * i; d.y = h/2; }); 

ma l'uscita prodotta ha tutti i nodi e bordi orizzontalmente a cui sono stati inizializzati.

In secondo luogo, è vero che il grafico della forza è centrato automaticamente all'interno dell'elemento svg? Se no, come possiamo farlo? Se sì, come possiamo specificare un centro per il grafico della forza all'interno dell'elemento svg?

(* Nota: stranamente, quando si imposta .size([w, h]) dove w = h per il grafico forza, e deterministico inizializzazione dei nodi lungo una diagonale, tutti i nodi e bordi sono posizionate lungo che diagonale nell'output, perché)

Answer 1

Prova ad aggiungere una forza di gravità personalizzata applicata su ciascun segno di spunta che tira i nodi verso la linea orizzontale. Qualcosa di simile a questo:

force.on('tick', function(e) { 
    nodes.forEach(function(d) { 
    d.y += (height/2 - d.y) * e.alpha; 
    }); 
}) 

Per la seconda domanda, io credo, non è centrato, ma c'è una piccola forza di gravità di default che tira i nodi verso il centro.