d3.js鱼眼畸变在地图上 [英] d3.js fisheye distortion on map

问题描述

我试图用fisheye.js插件（ https://github.com/d3/d3-plugins/tree/master/fisheye ）。

I'm trying to distort a d3.geo.path() map with the fisheye.js plugin (https://github.com/d3/d3-plugins/tree/master/fisheye).

扭曲对象插件需要x& y属性。

To distort an object the plugin needs x & y attributes.

在d3.js wiki中，它表示：

In the d3.js wiki it says:

投影函数采用表示位置[经度，纬度]的坐标的数字的二元数组，并返回表示投影像素位置[x，y]的类似的二元数组。例如，一个基本的球形墨卡托投影：

A projection function takes a two-element array of numbers representing the coordinates of a location, [longitude, latitude], and returns a similar two-element array of numbers representing the projected pixel position [x, y]. For example, a rudimentary spherical Mercator projection:

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

因此，失真应该是可能的，我只是不能包围我的头。

So the distortion should be possible, I just can't wrap my head around it.

我使用world-50m.json作为我的投影。一旦加载，就有一个arcs数组。我认为那些是我需要操纵的坐标。但这是猜测...

I'm using the world-50m.json for my projection. Once loaded there is an the arcs array. I think those are the coordinates I need to manipulate. But this is guesswork...

谢谢，

Kim

推荐答案

我发现你的帖子寻找答案，它似乎不是在互联网上。

I found your post looking for the answer, and it doesn't appear to be out there on the internets. But, like you say, it's possible!

按照fisheye.js中的文档（ https://github.com/d3/d3-plugins/tree/master/fisheye ），在mousemove回调你需要使用鱼眼

Following the documentation from the fisheye.js (https://github.com/d3/d3-plugins/tree/master/fisheye), in the mousemove callback you need to use fisheye on the coordinates.

由于鱼眼使用 .x 和 .y 属性，我修改鱼眼代码只使用两个 [x，y] ，以避免每次在回调中创建中间数据结构。

Since fisheye uses the .x and .y attributes, I modified the fisheye code to just use the two pair [x,y] to avoid making that intermediate data structure every time in the callback.

然后你可以这样做：

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

You can view a live version here: http://panometer.org/instruments/teletherms/?window=25&var=maxT&year=1914&city=BURLINGTON%20WSO%20AP,%20VT

这篇关于d3.js鱼眼畸变在地图上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！