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/

2 つの半透明の黒い帯の交点にあるドットをドラッグすると、バーが移動し、それに応じて魚眼のフォーカスも変化します。

ドラッグが終わったら、2 つの軸 (yAxis の目盛り 1 つ + xAxis の目盛り 1 つ) の最も近い交点をドットの中心に移動したいと思います。

魚眼ライブラリ自体を少しハックする必要があると思います: 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 に答える