Учебники

D3.js — API масштабирования

Декабрь 25, 2018

Масштабирование помогает масштабировать ваш контент. Вы можете сосредоточиться на конкретном регионе, используя подход «щелкни и перетащи». В этой главе мы подробно обсудим API Zooming.

Конфигурирование API

Вы можете загрузить API Zooming непосредственно из «d3js.org», используя следующий скрипт. 

<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-ease.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script src = "https://d3js.org/d3-transition.v1.min.js"></script>
<script src = "https://d3js.org/d3-drag.v1.min.js"></script>
<script src = "https://d3js.org/d3-zoom.v1.min.js"></script>

<body>
   <script>
   </script>
</body>

Методы масштабирования API

Ниже приведены некоторые из наиболее часто используемых методов API Zooming.

  • d3.zoom ()
  • масштабирования (выбор)
  • zoom.transform (выбор, преобразование)
  • zoom.translateBy (выделение, х, у)
  • zoom.translateTo (выделение, х, у)
  • zoom.scaleTo (выбор, k)
  • zoom.scaleBy (выбор, к)
  • zoom.filter ([фильтр])
  • zoom.wheelDelta ([дельта])
  • zoom.extent ([степени])
  • zoom.scaleExtent ([степени])
  • zoom.translateExtent ([степени])
  • zoom.clickDistance ([расстояние])
  • zoom.duration ([продолжительность])
  • zoom.interpolate ([интерполировать])
  • zoom.on (typenames [, слушатель])

Давайте кратко рассмотрим все эти методы Zooming API.

d3.zoom ()

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

<script>
   var zoom = d3.zoom();
</script>

масштабирования (выбор)

Используется для применения трансфокации к выбранному элементу. Например, вы можете создать экземпляр поведения mousedown.zoom, используя следующий синтаксис. 

selection.call(d3.zoom().on("mousedown.zoom", mousedowned));

zoom.transform (выбор, преобразование)

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

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

Мы также можем сбросить преобразование масштабирования в преобразование идентичности на 1000 миллисекунд, используя следующий синтаксис. 

selection.transition().duration(1000).call(zoom.transform, d3.zoomIdentity);

zoom.translateBy (выделение, х, у)

Используется для преобразования текущего трансфокатора выбранных элементов по значениям x и y. Вы можете указать значения перевода x и y либо в виде чисел, либо в виде функций, возвращающих числа. Если функция вызывается для выбранного элемента, то она передается через текущий элемент данных «d» и индекс «i» для DOM. Пример кода определен ниже. 

zoom.translateBy(selection, x, y) {
   zoom.transform(selection, function() {
      return constrain(this.__zoom.translate(
         x = = = "function" ? x.apply(this, arguments) : x,
         y = = = "function" ? y.apply(this, arguments) : y
      );
   }
};

zoom.translateTo (выделение, х, у)

Он используется для преобразования текущего трансфокатора выбранных элементов в указанную позицию x и y.

zoom.scaleTo (выбор, k)

Используется для масштабирования текущего трансфокатора выбранных элементов до k . Здесь k — масштабный коэффициент, указанный как числа или функции. 

zoom.scaleTo = function(selection, k) {
   zoom.transform(selection, function() {
      k = = = "function" ? k.apply(this, arguments) : k;
   });
};

zoom.scaleBy (выбор, к)

Он используется для масштабирования текущего преобразования зоны выбранных элементов на k . Здесь k — масштабный коэффициент, заданный либо в виде чисел, либо в виде функций, возвращающих числа. 

zoom.scaleBy = function(selection, k) {
   zoom.scaleTo(selection, function() {
      var k0 = this.__zoom.k,
      k1 = k = = = "function" ? k.apply(this, arguments) : k;
      return k0 * k1;
   });
};

zoom.filter ([фильтр])

Используется для установки фильтра на указанную функцию для масштабирования. Если фильтр не указан, он возвращает текущий фильтр, как показано ниже. 

function filter() {
   return !d3.event.button;
}

zoom.wheelDelta ([дельта])

Значение Δ возвращается дельта-функцией колеса. Если дельта не указана, возвращается текущая дельта-функция колеса.

zoom.extent ([степени])

Он используется для установки экстента для указанных точек массива. Если экстент не указан, он возвращает текущий аксессор экстента, который по умолчанию имеет значение [[0, 0], [width, height]], где width — это ширина клиента элемента, а height — его высота клиента.

zoom.scaleExtent ([степени])

Он используется для установки экстента шкалы для указанного массива чисел [k0, k1]. Здесь k0 — минимально допустимый масштабный коэффициент. В то время как k1 — максимально допустимый масштабный коэффициент. Если экстент не указан, он возвращает текущий масштабный масштаб, который по умолчанию равен [0, ∞]. Рассмотрим пример кода, который определен ниже. 

selection
   .call(zoom)
   .on("wheel", function() { d3.event.preventDefault(); });

Пользователь может попытаться увеличить масштаб с помощью колесика, когда уже достигнут соответствующий предел экстента шкалы. Если мы хотим предотвратить прокрутку на входе колеса независимо от масштаба, зарегистрируйте прослушиватель события колеса, чтобы предотвратить поведение браузера по умолчанию.

zoom.translateExtent ([степени])

Если экстент указан, он устанавливает экстент перевода в указанный массив точек. Если экстент не указан, он возвращает текущий экстент перевода, который по умолчанию равен [[-∞, -∞], [+ ∞, + ∞]].

zoom.clickDistance ([расстояние])

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

zoom.duration ([продолжительность])

Этот метод используется для установки длительности переходов при двойном щелчке и двойном касании к указанному количеству миллисекунд и возвращает поведение при масштабировании. Если длительность не указана, возвращается текущая длительность, которая по умолчанию составляет 250 миллисекунд, что определено ниже. 

selection
   .call(zoom)
   .on("dblclick.zoom", null);

zoom.interpolate ([интерполировать])

Этот метод используется для интерполяции при переходах масштабирования к указанной функции. Если интерполяция не указана, она возвращает текущую фабрику интерполяции, которая по умолчанию имеет значение d3.interpolateZoom.

zoom.on (typenames [, слушатель])

Если указывается прослушиватель, он устанавливает прослушиватель событий для указанных типов имен и возвращает поведение масштабирования. Typenames — это строка, содержащая одно или несколько typename, разделенных пробелами. Каждое имя типа является типом, за которым необязательно следует точка (.) И имя, например zoom.one и zoom.second. Имя позволяет регистрировать несколько слушателей для одного и того же типа. Этот тип должен быть одним из следующих —

  • Начало — после начала масштабирования (например, в mousedown).

  • Масштаб — после изменения трансформации масштабирования (например, при перемещении мыши).

  • End — после завершения масштабирования (например, при наведении мыши).

Начало — после начала масштабирования (например, в mousedown).

Масштаб — после изменения трансформации масштабирования (например, при перемещении мыши).

End — после завершения масштабирования (например, при наведении мыши).

В следующей главе мы обсудим API различных запросов в D3.js.

58
Share: