D3.js - API перетаскивания

Перетаскивание - одна из самых известных концепций в d3.js. В этой главе подробно объясняется перетаскивание и его методы.

Установка

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

<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-drag.v1.min.js"></script>

Перетаскивание методов API

Ниже приведены некоторые из наиболее важных методов API перетаскивания в D3.js.

d3.drag()
drag(selection)
drag.container([container])
drag.filter([filter])
drag.subject([subject])
drag.clickDistance([distance])
drag.on (typenames, [слушатель])
d3.dragDisable(window)
d3.dragEnable (окно [, noclick])

Давайте теперь разберемся с каждым из них подробно.

d3.drag ()

Этот метод используется для создания нового перетаскивания. Вы можете вызвать этот метод, используя следующий скрипт.

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

перетащить (выделение)

Этот метод используется для применения перетаскивания к указанному выделению. Вы можете вызвать эту функцию, используяselection.call. Ниже приведен простой пример.

d3.select(".node").call(d3.drag().on("drag", mousemove));

Здесь поведение перетаскивания, применяемое к выбранным элементам, осуществляется через selection.call.

drag.container([container])

Он используется для установки контейнера для указанной функции для перетаскивания. Если контейнер не указан, он возвращает текущий метод доступа. Чтобы перетащить любые графические элементы с помощью Canvas, вы можете переопределить контейнер как сам себя. Это определено ниже.

function container() {
   return this;
}

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

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

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

drag.subject ([тема])

Он используется для установки объекта на указанную функцию перетаскивания и определяется ниже.

function subject(d) {
   return d = =  null ? {x: d3.event.x, y: d3.event.y} : d;
}

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

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

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

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

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

start - запускает новый указатель.
drag - перетаскивает активный указатель.
end - Неактивен активный указатель.

d3.dragDisable (окно)

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

d3.dragEnable (окно [, noclick])

Этот метод используется для включения перетаскивания выделения в указанном месте окна. Он используется для вызова действия события mouseup. Если вы назначаете значение noclick равным true, то событие щелчка истекает с таймаутом в 0 миллисекунд.

API перетаскивания - события перетаскивания

Метод D3.event используется для установки события перетаскивания. Он состоит из следующих полей -

Target - Он представляет поведение перетаскивания.
Type - Это строка, которая может быть любой из следующих - «начало», «перетаскивание» или «конец».
Subject - Тема перетаскивания, определенная с помощью drag.subject.

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

Объект события предоставляет метод event.on для выполнения перетаскивания. Это определяется следующим образом.

d3.event.on("drag", dragged).on("end", ended);