Transformation problems in the implementation of fisheye distortions in a radial tree

Question

Basically, I'm trying to apply the fisheye d3 distortion algorithm to a radial tree. I believe that the problems that I encounter are related to the fact that the cords supplied to the fisheye distortion are the cords computed from d3.layout.tree. But the actual coordinates have been adjusted by g-conversion. Thus, the coordinates resulting from fisheye distortion must be corrected back to the g-transform.

For example:

// 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]; })

I tried to do this ... here is the fiddle .

I'm a little close ... help is appreciated.

Answer 1

, , :

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

, , (x, y), .

fisheye, "accessor" d.x d.y. , , " ", x/y, . , ; d3.

( github, , . , / fisheye, - .)

:

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);
};

, , , ( , ) d.fisheye.x d.fisheye.y.

, , d3.svg.diagonal, :

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

:

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

:

.

pointer-events:all;, , .

( node , ), .

, , , Javascript. , , . , - d3.svg.diagonal() d3.svg.diagonal.radial() , ...