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

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

Настройка API

Вы можете загрузить API масштабирования прямо из «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 масштабирования.

d3.zoom()
zoom(selection)
zoom.transform (выделение, преобразование)
zoom.translateBy (выделение, x, y)
zoom.translateTo (выделение, x, y)
zoom.scaleTo (выделение, k)
zoom.scaleBy (выделение, k)
zoom.filter([filter])
zoom.wheelDelta([delta])
zoom.extent([extent])
zoom.scaleExtent([extent])
zoom.translateExtent([extent])
zoom.clickDistance([distance])
zoom.duration([duration])
zoom.interpolate([interpolate])
zoom.on (typenames [, слушатель])

Давайте вкратце рассмотрим все эти методы 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. Вы можете указать значения преобразования 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)

Он используется для перевода текущего преобразования масштабирования выбранных элементов в указанную позицию 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. Вот,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], [ширина, высота]], где ширина - это клиентская ширина элемента, а высота - его клиентская высота.

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 [, слушатель])

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

Start - после начала масштабирования (например, при уменьшении изображения).
Zoom - после изменения масштабирования (например, при перемещении мыши).
End - после окончания масштабирования (например, при наведении курсора мыши).

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