1

fisheye.js プラグイン ( https://github.com/d3/d3-plugins/tree/master/fisheye ) を使用して d3.geo.path() マップを歪めようとしています。

オブジェクトを歪めるには、プラグインに x & y 属性が必要です。

d3.js wiki には次のように書かれています。

投影関数は、位置の座標 [経度、緯度] を表す数値の 2 要素配列を取り、投影されたピクセル位置 [x, y] を表す同様の数値の 2 要素配列を返します。たとえば、初歩的な球状メルカトル図法:

https://github.com/mbostock/d3/wiki/Geo-Paths

ですから、歪みは可能であるはずですが、頭を包むことはできません。

投影には world-50m.json を使用しています。ロードされると、arcs 配列があります。それらは私が操作する必要がある座標だと思います。しかし、これは推測です...

ありがとう、

キム

4

1 に答える 1

2

答えを探しているあなたの投稿を見つけましたが、インターネット上にはないようです。でも、おっしゃるとおり可能です！

fisheye.js ( https://github.com/d3/d3-plugins/tree/master/fisheye ) のドキュメントに従って、mousemove コールバックで座標に fisheye を使用する必要があります。

fisheye は属性.xと属性を使用するため、コールバックで毎回中間データ構造を作成することを避けるために.y、2 つのペアのみを使用するように魚眼コードを変更しました。[x,y]

次に、次のようにします。

canvas.on("mousemove", function() {
    // console.log("mouse:");
    // console.log(d3.mouse(this));
    var here = d3.mouse(this);
    // console.log(here); // [1030, 125]
    // console.log(projection.invert(here)); // [-72.4713375653601, 45.14035261565636]
    var inverted = projection.invert([here[0],here[1]]); // [-72.4713375653601, 45.14035261565636]
    // console.log(inverted); // [-72.4713375653601, 45.14035261565636]
    // burlington is lat 44, lon -73
    fisheye.focus(inverted);

    // of course, the path function takes [longitude, latitude], so -72, 44 for burlington
    // https://github.com/mbostock/d3/wiki/Geo-Paths
    // (so that's what it gives back)

    states.attr("d",null)
        .attr("d", function(d) {
            // console.log("original:");
            // console.log(d.geometry);

            if (d.geometry.type === "Polygon") {
                var b = d.geometry.coordinates.map(function(d) { return d.map(function(f) { return fisheye(f);}); });
            }
            else {
                var b = d.geometry.coordinates.map(function(d) { return d.map(function(f) { return f.map(function(g) { return fisheye(g); }); }); });
            }
            // console.log(b);
            var c = {type: d.geometry.type, coordinates: b};

            // console.log("new:");
            // console.log(c);

            return path(c);
    });

ここでライブ バージョンを表示できます: http://panometer.org/instruments/teletherms/?window=25&var=maxT&year=1914&city=BURLINGTON%20WSO%20AP,%20VT

于 2015-08-25T16:53:19.293 に答える