D3 интерактивный глобус 2d / 3d режим прыгает при первом взаимодействии

Question

Я создал пример интерактивного глобуса с переключателем 2d / 3d: https://jsfiddle.net/kmturley/wnovo0rb/3/

Для обеих задач глобус переходит в другое положение при первом взаимодействии пользователя:

1. 2-мерное масштабирование прыгает в первый раз
2. 3D-увеличение, панорамирование прыгает в первый раз

Вот функция масштабирования (где, я считаю, проблема):

function zoomed() {
  var transform = d3.event.transform;
  var r = {
    x: λ(transform.x),
    y: φ(transform.y)
  };
  var k = projection.scale() / 200;
  if (d3.event.sourceEvent.wheelDelta) {
    projection.scale(scale * transform.k);
    if (is3D) {
      transform.x = lastX;
      transform.y = lastY;
    } else {
      projection.translate([origin.x + transform.x - (width / 2), origin.y + transform.y - (height / 2)]);
    }
  } else {
    if (is3D) {
      projection.rotate([(origin.x + r.x) / k, (origin.y + r.y) / k]);
    } else {
      projection.translate([origin.x + transform.x - (width / 2), origin.y + transform.y - (height / 2)]);
    }
  }
  lastX = transform.x;
  lastY = transform.y; svg.selectAll('path.graticule').datum(graticule).attr('d', geoPath);
}

Answer 1

В строках 33 и 34 вашего примера со скрипкой просто удалите деталь / 2 из начала координат.