Graph orientación y el nodo de posicionamiento en d3.js

Question

Gracias a esta anterior question, I produjo un gráfico de diseño fijo estático como a continuación utilizando el diseño fuerza en d3.js:

y tengo dos preguntas específicas a personalizar el diseño:

Primero, veo que la inicialización de los nodos se determina de manera determinista (por ejemplo, en diagonal, ver script para más detalles) corrige las posiciones de los nodos, y la orientación de los nodos parece depender de esta inicialización como nosotros ll como las dimensiones del gráfico de fuerza *. Me pregunto cómo puedo hacer que los nodos A, D, E, F, I en el gráfico de arriba alineados horizontalmente? En otras palabras, quiero girar la orientación del gráfico hacia la izquierda durante aproximadamente 45 grados. He tratado de inicializar los nodos horizontalmente en el medio:

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

pero la salida producida tiene todos los nodos y los bordes horizontalmente en donde se inicializan.

En segundo lugar, ¿es cierto que el gráfico de fuerzas se centra automáticamente en el elemento svg? Si no, ¿cómo podemos hacerlo? En caso afirmativo, ¿cómo podemos especificar un centro para el gráfico de fuerza dentro del elemento svg?

(* Nota:? Extrañamente, al establecer .size([w, h]) donde w = h para el gráfico de la fuerza, y de manera determinista la inicialización de los nodos a lo largo de una diagonal, todos los nodos y los bordes se colocan a lo largo de esa diagonal en la salida, por qué)

Answer 1

Intente agregar una fuerza de gravedad personalizada aplicada en cada tic que tira de los nodos hacia la línea horizontal. Algo como esto:

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

Para su segunda pregunta, creo, no está centrado, pero hay una pequeña fuerza de la gravedad por defecto que tira de los nodos hacia el centro.