0

我正在修改此来源以制作线性鱼眼视图：http ://bost.ocks.org/mike/fisheye/

我的工作在下面的jsfiddle地址：

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/

当您拖动两条半透明黑带交叉处的点时，条会移动，鱼眼焦点也会相应改变。

拖动结束后，我想将两个轴（一个 yAxis 刻度 + 一个 xAxis 刻度）的最近交点移动到点的中心。

我想我需要稍微破解一下鱼眼库本身：https ://github.com/d3/d3-plugins/blob/master/fisheye/fisheye.js

有任何想法吗？

4

1 回答 1

0

无需破解鱼眼库。我认为这是您所要求的：http: //jsfiddle.net/axelsoto/Yh8cX/。在“mouseup”事件上调用以下函数：

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

但是，让我说这不是一个好主意，因为线条会不成比例地扭曲。我认为将点的中心移动到最近的交叉点更有意义（这与您的要求相反）。程序的逻辑是相同的，尽管最终更新应该在点的中心而不是在网格线上。

于 2014-01-26T06:48:30.393 回答