WebCola
Options
All
  • Public
  • Public/Protected
  • All
Menu

A D3 Drag Behavior

The first generic refers to the type of element to be dragged. The second generic refers to the type of the datum of the dragged element. The third generic refers to the type of the drag behavior subject.

The subject of a drag gesture represents the thing being dragged. It is computed when an initiating input event is received, such as a mousedown or touchstart, immediately before the drag gesture starts. The subject is then exposed as event.subject on subsequent drag events for this gesture.

The default subject is the datum of the element in the originating selection (see drag) that received the initiating input event; if this datum is undefined, an object representing the coordinates of the pointer is created. When dragging circle elements in SVG, the default subject is thus the datum of the circle being dragged. With Canvas, the default subject is the canvas element’s datum (regardless of where on the canvas you click). In this case, a custom subject accessor would be more appropriate, such as one that picks the closest circle to the mouse within a given search radius.

Type parameters

Hierarchy

  • Function
    • DragBehavior

Callable

  • __call(selection: Selection<GElement, Datum, any, any>, ...args: any[]): void
  • Applies the drag behavior to the selected elements. This function is typically not invoked directly, and is instead invoked via selection.call.

    For details see: https://github.com/d3/d3-drag#_drag

    Parameters

    • selection: Selection<GElement, Datum, any, any>

      A D3 selection of elements.

    • Rest ...args: any[]

      Optional arguments to be passed in.

    Returns void

Index

Properties

Function

Function: FunctionConstructor

arguments

arguments: any

caller

caller: Function

length

length: number

prototype

prototype: any

Methods

apply

  • apply(this: Function, thisArg: any, argArray?: any): any
  • Calls the function, substituting the specified object for the this value of the function, and the specified array for the arguments of the function.

    Parameters

    • this: Function
    • thisArg: any

      The object to be used as the this object.

    • Optional argArray: any

      A set of arguments to be passed to the function.

    Returns any

bind

  • bind(this: Function, thisArg: any, ...argArray: any[]): any
  • For a given function, creates a bound function that has the same body as the original function. The this object of the bound function is associated with the specified object, and has the specified initial parameters.

    Parameters

    • this: Function
    • thisArg: any

      An object to which the this keyword can refer inside the new function.

    • Rest ...argArray: any[]

      A list of arguments to be passed to the new function.

    Returns any

call

  • call(this: Function, thisArg: any, ...argArray: any[]): any
  • Calls a method of an object, substituting another object for the current object.

    Parameters

    • this: Function
    • thisArg: any

      The object to be used as the current object.

    • Rest ...argArray: any[]

      A list of arguments to be passed to the method.

    Returns any

container

  • Returns the current container accessor function.

    Returns ValueFn

  • Sets the container accessor to the specified function and returns the drag behavior.

    The container of a drag gesture determines the coordinate system of subsequent drag events, affecting event.x and event.y. The element returned by the container accessor is subsequently passed to d3.mouse or d3.touch, as appropriate, to determine the local coordinates of the pointer.

    The default container accessor returns the parent node of the element in the originating selection (see drag) that received the initiating input event. This is often appropriate when dragging SVG or HTML elements, since those elements are typically positioned relative to a parent. For dragging graphical elements with a Canvas, however, you may want to redefine the container as the initiating element itself, using "this" in the accessor function.

    Parameters

    • accessor: ValueFn

      A container accessor function which is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element. The function returns the container element.

  • Sets the container accessor to the specified object and returns the drag behavior.

    The container of a drag gesture determines the coordinate system of subsequent drag events, affecting event.x and event.y. The element returned by the container accessor is subsequently passed to d3.mouse or d3.touch, as appropriate, to determine the local coordinates of the pointer.

    The default container accessor returns the parent node of the element in the originating selection (see drag) that received the initiating input event. This is often appropriate when dragging SVG or HTML elements, since those elements are typically positioned relative to a parent. For dragging graphical elements with a Canvas, however, you may want to redefine the container as the initiating element itself, such as drag.container(canvas).

    Parameters

filter

  • Returns the current filter function.

    Returns ValueFn

  • Sets the filter to the specified filter function and returns the drag behavior.

    If the filter returns falsey, the initiating event is ignored and no drag gesture is started. Thus, the filter determines which input events are ignored. The default filter ignores mousedown events on secondary buttons, since those buttons are typically intended for other purposes, such as the context menu.

    Parameters

    • filterFn: ValueFn

      A filter function which is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element. The function returns a boolean value.

on

  • on(typenames: string): ValueFn | undefined
  • on(typenames: string, listener: null)
  • on(typenames: string, listener: ValueFn)
  • Return the first currently-assigned listener matching the specified typenames, if any.

    Parameters

    • typenames: string

      The typenames is a string containing one or more typename separated by whitespace. Each typename is a type, optionally followed by a period (.) and a name, such as "drag.foo"" and "drag.bar"; the name allows multiple listeners to be registered for the same type. The type must be one of the following: start (after a new pointer becomes active [on mousedown or touchstart]), drag (after an active pointer moves [on mousemove or touchmove], or end (after an active pointer becomes inactive [on mouseup, touchend or touchcancel].)

    Returns ValueFn | undefined

  • Remove the current event listeners for the specified typenames, if any, return the drag behavior.

    Parameters

    • typenames: string

      The typenames is a string containing one or more typename separated by whitespace. Each typename is a type, optionally followed by a period (.) and a name, such as "drag.foo"" and "drag.bar"; the name allows multiple listeners to be registered for the same type. The type must be one of the following: start (after a new pointer becomes active [on mousedown or touchstart]), drag (after an active pointer moves [on mousemove or touchmove], or end (after an active pointer becomes inactive [on mouseup, touchend or touchcancel].)

    • listener: null

      Use null to remove the listener.

  • Set the event listener for the specified typenames and return the drag behavior. If an event listener was already registered for the same type and name, the existing listener is removed before the new listener is added. When a specified event is dispatched, each listener will be invoked with the same context and arguments as selection.on listeners.

    Changes to registered listeners via drag.on during a drag gesture do not affect the current drag gesture. Instead, you must use event.on, which also allows you to register temporary event listeners for the current drag gesture. Separate events are dispatched for each active pointer during a drag gesture. For example, if simultaneously dragging multiple subjects with multiple fingers, a start event is dispatched for each finger, even if both fingers start touching simultaneously.

    Parameters

    • typenames: string

      The typenames is a string containing one or more typename separated by whitespace. Each typename is a type, optionally followed by a period (.) and a name, such as "drag.foo"" and "drag.bar"; the name allows multiple listeners to be registered for the same type. The type must be one of the following: start (after a new pointer becomes active [on mousedown or touchstart]), drag (after an active pointer moves [on mousemove or touchmove], or end (after an active pointer becomes inactive [on mouseup, touchend or touchcancel].)

    • listener: ValueFn

      An event listener function which is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element.

subject

  • Returns the current subject accessor functions.

    Returns ValueFn

  • Sets the subject accessor to the specified function and returns the drag behavior.

    The subject of a drag gesture represents the thing being dragged. It is computed when an initiating input event is received, such as a mousedown or touchstart, immediately before the drag gesture starts. The subject is then exposed as event.subject on subsequent drag events for this gesture.

    The default subject is the datum of the element in the originating selection (see drag) that received the initiating input event; if this datum is undefined, an object representing the coordinates of the pointer is created. When dragging circle elements in SVG, the default subject is thus the datum of the circle being dragged. With Canvas, the default subject is the canvas element’s datum (regardless of where on the canvas you click). In this case, a custom subject accessor would be more appropriate, such as one that picks the closest circle to the mouse within a given search radius.

    The subject of a drag gesture may not be changed after the gesture starts.

    During the evaluation of the subject accessor, d3.event is a beforestart drag event. Use event.sourceEvent to access the initiating input event and event.identifier to access the touch identifier. The event.x and event.y are relative to the container, and are computed using d3.mouse or d3.touch as appropriate.

    Parameters

    • accessor: ValueFn

      An extent accessor function which is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element.The returned subject should be an object that exposes x and y properties, so that the relative position of the subject and the pointer can be preserved during the drag gesture. If the subject is null or undefined, no drag gesture is started for this pointer; however, other starting touches may yet start drag gestures.

toString

  • toString(): string
  • Returns a string representation of a function.

    Returns string

Legend

  • Module
  • Object literal
  • Variable
  • Function
  • Function with type parameter
  • Index signature
  • Type alias
  • Enumeration
  • Enumeration member
  • Property
  • Method
  • Interface
  • Interface with type parameter
  • Constructor
  • Property
  • Method
  • Index signature
  • Class
  • Class with type parameter
  • Constructor
  • Property
  • Method
  • Accessor
  • Index signature
  • Inherited constructor
  • Inherited property
  • Inherited method
  • Inherited accessor
  • Protected property
  • Protected method
  • Protected accessor
  • Private property
  • Private method
  • Private accessor
  • Static property
  • Static method

Generated using TypeDoc