Как определить панорамирование и масштабирование пользователем с помощью d3 zoomBehavior?

Question

Я использую d3.zoomBehavior, чтобы включить панорамирование и масштабирование на карте.Работает нормально.Я также написал код для переназначения карты на сфокусированном элементе, который также работаетЯ хочу отключить эту «автоматическую перенастройку», если пользователь вручную масштабировал или панорамировал (проверяя, «грязные» ли элементы управления картой.)

Как получить доступ к событиям, когда пользователь вручную перемещаеткарта?

Я попытался получить доступ к событиям перетаскивания, вращения и масштабирования:

d3.select("svg").call(this.zoomBehavior).on("wheel", () => {
  console.log("user has zoomed with wheel"); // never gets called
}).on("drag", () => {
  console.log("user has panned map"); // never gets called
}).on("zoom", () => {
  console.log("zoom event"); // gets called even when the map is autofocusing -- not what I need.
});

К каким событиям в выборке можно привязаться, чтобы определить, когда пользователь манипулирует масштабированием и панорамированием

Answer 1

В вашей увеличенной функции проверьте, определено ли d3.event.sourceEvent.Увеличение, вызванное selection.call(zoom.transform,someZoomTransform), имеет sourceEvent of null.Кроме того, sourceEvent.type может предоставить дополнительную информацию о типе события (например, колесо, движение мыши).

Этот подход используется в примере кисти и масштабирования Bostock .Чистка вручную запускает программное обновление масштабирования, а ручное масштабирование запускает программное обновление кисти: в примере необходимо определить, что такое ручное или программное масштабирование / кисть, чтобы избежать бесконечного цикла.

Ниже программного масштабированияприменяется к SVG (охватывает окно предварительного просмотра фрагмента), но вы также можете панорамировать / масштабировать.Проверяя, имеет ли значение sourceEvent значение NULL, мы можем видеть, было ли масштабирование инициировано пользователем или программно:

var svg = d3.select("body")
  .append("svg")
  .attr("width", 600)
  .attr("height", 500);

var zoom = d3.zoom()
  .on("zoom", function() {
      if(d3.event.sourceEvent) {
        console.log("not programmatic zoom");
      }
      else {
        console.log("programmatic zoom");
      }
      
  })

svg.call(zoom);
svg.call(zoom.transform,d3.zoomIdentity);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>