d3.js - examples - jquery d3

problemas de transformación al implementar la distorsión ojo de pez en un árbol radial

Question

Básicamente, estoy intentando aplicar el algoritmo de distorsión ojo de pez d3 a un árbol radial. Creo que los problemas con los que me encuentro giran en torno al hecho de que los coords alimentados con la distorsión de ojo de pez son los coords calculados por d3.layout.tree. Pero las coordenadas reales se han ajustado mediante la transformación g. Por lo tanto, las coordenadas resultantes de la distorsión ojo de pez necesitan ajustarse de nuevo a la transformación g.

Por ejemplo:

// re-setting the projection according to fisheye coords
diagonal.projection(function(d) { d.fisheye = fisheye(d); return [d.fisheye.y, d.fisheye.x / 180 * Math.PI]; })

He estado intentando esto ... aquí está el violín .

Estoy algo cerca ... la ayuda es apreciada.

Answer 1

Siguiendo la dirección que sugerí en los comentarios, este es el resultado:

http://fiddle.jshell.net/7TPhq/7/

En lugar de usar rotaciones y traducciones para posicionar los nodos, creé dos funciones basadas en trigonometría para calcular la posición horizontal y vertical a partir de los valores de datos (x, y), que se tratan como coordenadas polares.

Luego tuve que configurar la función ojo de pez para utilizar mis funciones de posicionamiento como funciones de "acceso" en lugar de leer dx y dy directamente. Lamentablemente, el complemento básico que estaba utilizando para el ojo de pez no incluía una forma de obtener y configurar accesos x / y funciones, por lo que tuve que modificar eso también. Me sorprendió que no estuviera ya en el código; es una funcionalidad estándar en la mayoría de los objetos de diseño d3.

(Cuando configuro Github, tendré que hacer una solicitud de extracción para agregarlo. Sin embargo, tendré que averiguar cómo funciona la función de escala / zoom de ojo de pez; lo saqué de este ejemplo ya que no no lo está usando)

Las funciones de posicionamiento fueron las siguientes:

function getHPosition(d){
    //calculate the transformed (Cartesian) position (H, V)
    //(without fisheye effect)
    //from the polar coordinates (x,y) where 
    //x is the angle
    //y is the distance from (radius,radius)
    //See http://www.engineeringtoolbox.com/converting-cartesian-polar-coordinates-d_1347.html

    return (d.y)*Math.cos(d.x);
}
function getVPosition(d){
    return (d.y)*Math.sin(d.x);
};

Las funciones se utilizan para establecer la posición original de los nodos y enlaces, y luego, una vez que el ojo de pez se activa, utiliza estas funciones internamente, devolviendo los resultados (con distorsión si es apropiado) como d.fisheye.x y d.fisheye.y .

Por ejemplo, para enlaces significa que la proyección establece la función d3.svg.diagonal esta manera para la inicialización:

var diagonal = d3.svg.diagonal()
    .projection(function(d) { 
        return [getHPosition(d), getVPosition(d)]; 
});

Pero así para la actualización:

diagonal.projection(function(d) { 
    d.fisheye = fisheye(d); 
    return [d.fisheye.x, d.fisheye.y]; 
});

Hay un par de otros pequeños cambios:

Simplifique las dimensiones del área de trazado un poco.

Agregué un rectángulo de fondo con pointer-events:all; para que el ojo de pez no se encienda y apague a medida que el mouse se mueve entre los nodos y el fondo vacío.

No me molesté en rotar el texto (ya que los grupos de nodos ya no están girando, no ocurre de manera predeterminada), pero podría agregar fácilmente una transformación de rotación en los elementos de texto individuales.

Finalmente, y este me dejó perplejo por más tiempo del que me gustaría admitir, los ángulos tienen que estar en radianes para las funciones trigonométricas de Javascript. No pude entender por qué mis diseños eran tan feos, con líneas superpuestas . Pensé que era algo relacionado con cambiar entre d3.svg.diagonal() y d3.svg.diagonal.radial() y pasé mucho tiempo intentando hacer trigonometría inversa y todo tipo de cosas ...