d3.js fisheye; move focus to axis intersection

Question

I am modifying this source to make a linear fisheye view: http://bost.ocks.org/mike/fisheye/

My work is in the jsfiddle address below:

included code:
function startFishEye(x, y) {
    mag.attr('cx', x);
    mag.attr('cy', y);
    fe_area_x.attr('y', y);
    fe_area_y.attr('x', x);
    xLine.attr("x1", xFisheye).attr("x2", xFisheye);
    yLine.attr("y1", yFisheye).attr("y2", yFisheye);
}

http://jsfiddle.net/clerksx/vHExm/

When you drag the dot at the intersection of two semi-transparent black bands, the bars move and the fisheye focus also changes accordingly.

When the dragging is over, I'd like to move the closest intersection of two axe (one yAxis tick + one xAxis tic) to the center of the dot.

I guess I need to hack the fisheye libary itself a bit: https://github.com/d3/d3-plugins/blob/master/fisheye/fisheye.js

Any ideas?

score 0 · Answer 1 · answered Jan 26 '14 at 06:48

There is no need to hack the fisheye library. I think this what you are asking for: http://jsfiddle.net/axelsoto/Yh8cX/. The following function is called on the "mouseup" event:

function moveClosestLines(x, y) {
    var minDistX = Number.MAX_VALUE;
    var minIndexX = 0;
    var minDistY = Number.MAX_VALUE;
    var minIndexY = 0;

    xLine.attr("x1", function (d, i) {
        if (minDistX > Math.abs(x - d)) {
            minDistX = Math.abs(x - d);
            minIndexX = i;
        }
        return xFisheye(d);
    });
    xLine.filter(function (d, i) {
        if (i == minIndexX) {
            return true;
        } else {
            return false;
        }
    })
        .attr("x1", x)
        .attr("x2", x);

    yLine.attr("y1", function (d, i) {
        if (minDistY > Math.abs(y - d)) {
            minDistY = Math.abs(y - d);
            minIndexY = i;
        }
        return yFisheye(d);
    });
    yLine.filter(function (d, i) {
        if (i == minIndexY) {
            return true;
        } else {
            return false;
        }
    })
        .attr("y1", y)
        .attr("y2", y);
}

However, let me say that this is not a good idea as the lines get distorted unproportionally. I think it makes more sense to move the center of the dot to the closest intersection (this is the opposite to what you asked). The logic of the program would the same, although the final update should be on the center of the dot as opposed to on the grid lines.

d3.js fisheye; move focus to axis intersection

1 Answers1