Question

我正在修改此来源以制作线性鱼眼视图：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 tic）的最近交点移动到点的中心。

我想我需要稍微破解鱼眼图书馆：https://github.com/d3/d3-plugins/blob/master/fisheye/fisheye.js

有什么想法吗？

Answer 1

没有必要破解鱼眼图书馆。我想这就是你要求的：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);
}

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

d3.js fisheye;将焦点移动到轴交叉点

1 个答案: