Учебники

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

Декабрь 25, 2018

Drag and drop — одна из самых знакомых концепций в 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.container ([контейнер])
  • drag.filter ([фильтр])
  • drag.subject ([тема])
  • drag.clickDistance ([расстояние])
  • drag.on (typenames, [listener])
  • d3.dragDisable (окно)
  • d3.dragEnable (window [, 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, [listener])

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

  • start — запускает новый указатель

  • drag — перетаскивает активный указатель.

  • конец — неактивный активный указатель.

start — запускает новый указатель

drag — перетаскивает активный указатель.

конец — неактивный активный указатель.

d3.dragDisable (окно)

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

d3.dragEnable (window [, noclick])

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

Перетаскивание API — Drag Events

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

  • Цель — представляет поведение перетаскивания.

  • Тип — это строка, которая может быть любой из следующих: «начало», «перетаскивание» или «конец».

  • Тема — объект перетаскивания, определенный с помощью drag.subject.

Цель — представляет поведение перетаскивания.

Тип — это строка, которая может быть любой из следующих: «начало», «перетаскивание» или «конец».

Тема — объект перетаскивания, определенный с помощью drag.subject.

event.on (typenames, [listener])

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

54
Share: