d3.js fisheye distortion на карте

Question

Я пытаюсь исказить карту d3.geo.path() с помощью плагина fisheye.js (https://github.com/d3/d3-plugins/tree/master/fisheye).

Для искажения объекта плагин нуждается в x & y атрибутах.

В d3.js вики он говорит:

Функция проекции принимает два элемента массива чисел, представляющих координаты местоположения, [долгота, широта] а, и возвращает подобное двухэлементной массив чисел, представляющий проецируемую позицию пикселя [x, y]. Например, элементарная сферическая проекция Меркатора:

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

Таким образом, искажение должно быть возможно, я просто не могу обернуть мою голову вокруг него.

Я использую мир-50m.json для своей проекции. После загрузки имеется массив дуг. Я думаю, что это координаты, которые мне нужно манипулировать. Но это догадка ...

Спасибо,

Ким

Answer 1

Я нашел ваш пост ищет ответ, и он не появляется, чтобы быть там на интернетах. Но, как вы говорите, это возможно!

Следуя документации от fisheye.js (https://github.com/d3/d3-plugins/tree/master/fisheye), в обратном вызове mousemove вам необходимо использовать рыбий глаз по координатам.

Поскольку Рыбий использует атрибуты .x и .y, я изменил код сверхширокоугольный просто использовать две пары [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