d3.js 鱼眼；将焦点移至轴交点

Posted 2023-02-25

【中文标题】d3.js 鱼眼；将焦点移至轴交点

【英文标题】：d3.js fisheye; move focus to axis intersection

【发布时间】：2013-09-20 19:27:01

【问题描述】：

我正在修改此来源以制作线性鱼眼视图：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

有什么想法吗？

【参考方案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);

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