2012-07-26 11 views
14

He hecho un árbol ligeramente modificado utilizando el diseño de árbol. Necesitaba orientar el árbol de derecha a izquierda en lugar de la orientación normal de izquierda a derecha que es la predeterminada. ¿Cuál es la forma correcta y adecuada de d3: ish para hacer esto?Orientación de dibujo de árbol

Terminé haciendo esto simplemente invirtiendo la coordenada x después de crear el diseño, pero creo que esto es un truco. Sin duda, hay algo más elegante?

Pensé en hacer una rotación SVG alrededor del centro, pero luego tendría que rotar las etiquetas para obtener el texto correcto. Eso tampoco me pareció bien.

+0

Publicar un cierto código. – Wex

Respuesta

27

La disposición árbol calcula posiciones de nodo en un espacio arbitrario de coordenadas de anchura (x) y la profundidad (y). Para cambiar la orientación del diseño, cambie la asignación del espacio de coordenadas del diseño a las coordenadas de píxeles SVG. Si prefiere no hacer la asignación manualmente, puede usar quantitative scales para especificar una asignación más intuitiva (pero más detallada).

He aquí un ejemplo que muestra cuatro orientaciones diferentes:

+0

Hay un error/error ortográfico en la línea 26: "http:" falta al frente del enlace –

+0

¿Puede explicarnos mejor? Tengo conocimiento promedio de HTML y JS y una aplicación que funciona (árbol ampliable/clicable de izquierda a derecha) y me gustaría hacerlo de arriba abajo. –

+0

Cambié x e y en dos lugares en productTree.js uno hizo que la estructura del árbol fuera vertical y la otra hizo las etiquetas en el lugar correcto. Lamentablemente, el árbol no tiene frontera, por lo tanto, las etiquetas están una encima de la otra: / –