Javascript d3.js地图上的鱼眼失真

我试图用fisheye.js插件（）扭曲d3.geo.path（）地图

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

在d3.js维基中，它说：

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

所以扭曲应该是可能的，我只是不能把我的头围绕着它

我正在使用world-50m.json进行投影。加载后，arcs阵列中会出现一个。我想这些是我需要操纵的坐标。但这只是猜测

谢谢

---

Kim

我发现你的帖子在寻找答案，但它似乎不在互联网上。但是，就像你说的，这是可能的

根据fisheye.js（）中的文档，在mousemove回调中，您需要在坐标上使用fisheye

由于fisheye使用了

.x

和

.y

属性，因此我修改了fisheye代码，使其仅使用两对

[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);
    });

---

您可以在此处查看实时版本：

嗨，安迪，您介意解释一下if/else部分中

d.map

和

f.map

语句的顺序吗？他们到底在做什么？为什么第一个使用

d.map

，第二个使用

d.map

和

f.map

？我正试图以类似的方式实现鱼眼失真，但我的头脑在这个问题上遇到了一些困难，因此出现了错误（所有路径最终都变成了NaN）。谢谢很抱歉回答得很简短-JS变量是函数作用域，这就是原因。我建议阅读“JS:thegoodparts”（由克劳福德撰写），以获得一个好的JS参考（我在D3中已经取得了相当大的进步，没有太多的JS，但它已经赶上了）。