Interface DragBehavior<GElement, Datum, Subject>

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.

interface DragBehavior {
    [metadata]: DecoratorMetadataObject;
    arguments: any;
    caller: Function;
    length: number;
    name: string;
    prototype: any;
    [hasInstance](value): boolean;
    apply(this, thisArg, argArray?): any;
    bind(this, thisArg, ...argArray): any;
    call(this, thisArg, ...argArray): any;
    clickDistance(): number;
    clickDistance(distance): DragBehavior<GElement, Datum, Subject>;
    container(): ValueFn<GElement, Datum, DragContainerElement>;
    container(accessor): DragBehavior<GElement, Datum, Subject>;
    container(container): DragBehavior<GElement, Datum, Subject>;
    filter(): ((this, event, d) => boolean);
    filter(filterFn): DragBehavior<GElement, Datum, Subject>;
    on(typenames): ((this, event, d) => void);
    on(typenames, listener): DragBehavior<GElement, Datum, Subject>;
    on(typenames, listener): DragBehavior<GElement, Datum, Subject>;
    subject(): ((this, event, d) => Subject);
    subject(accessor): DragBehavior<GElement, Datum, Subject>;
    toString(): string;
    touchable(): ValueFn<GElement, Datum, boolean>;
    touchable(touchable): DragBehavior<GElement, Datum, Subject>;
    touchable(touchable): DragBehavior<GElement, Datum, Subject>;
    (selection, ...args): void;
}

Type Parameters

Hierarchy

  • 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

Methods

  • Determines whether the given value inherits from this function if this function was used as a constructor function.

    A constructor function can control which objects are recognized as its instances by 'instanceof' by overriding this method.

    Parameters

    • value: any

    Returns boolean

  • 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

  • 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

  • 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

  • Return the current click distance threshold, which defaults to zero.

    Returns number

  • Set the maximum distance that the mouse can move between mousedown and mouseup that will trigger a subsequent click event. If at any point between mousedown and mouseup the mouse is greater than or equal to distance from its position on mousedown, the click event following mouseup will be suppressed.

    Parameters

    • distance: number

      The distance threshold between mousedown and mouseup measured in client coordinates (event.clientX and event.clientY). The default is zero.

    Returns DragBehavior<GElement, Datum, Subject>

  • Returns the current container accessor function.

    Returns ValueFn<GElement, Datum, DragContainerElement>

  • 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.pointer 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<GElement, Datum, DragContainerElement>

      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.

    Returns DragBehavior<GElement, Datum, Subject>

  • 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.pointer 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

    Returns DragBehavior<GElement, Datum, Subject>

  • Returns the current filter function.

    Returns ((this, event, d) => boolean)

      • (this, event, d): boolean
      • Returns the current filter function.

        Parameters

        • this: GElement
        • event: any
        • d: Datum

        Returns boolean

  • Sets the event 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: ((this, event, d) => boolean)

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

        • (this, event, d): boolean
        • Parameters

          • this: GElement
          • event: any
          • d: Datum

          Returns boolean

    Returns DragBehavior<GElement, Datum, Subject>

  • 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 ((this, event, d) => void)

      • (this, event, d): void
      • Parameters

        • this: GElement
        • event: any
        • d: Datum

        Returns void

  • 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.

    Returns DragBehavior<GElement, Datum, Subject>

  • 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: ((this, event, d) => void)

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

        • (this, event, d): void
        • Parameters

          • this: GElement
          • event: any
          • d: Datum

          Returns void

    Returns DragBehavior<GElement, Datum, Subject>

  • Returns the current subject accessor functions.

    Returns ((this, event, d) => Subject)

      • (this, event, d): Subject
      • Returns the current subject accessor functions.

        Parameters

        • this: GElement
        • event: any
        • d: Datum

        Returns Subject

  • 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, 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.pointer.

    Parameters

    • accessor: ((this, event, d) => Subject)

      An extent accessor function which is evaluated for each selected element, in order, being passed the current event (event) and datum d, with the this context 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.

        • (this, event, d): Subject
        • Parameters

          • this: GElement
          • event: any
          • d: Datum

          Returns Subject

    Returns DragBehavior<GElement, Datum, Subject>

  • Returns a string representation of a function.

    Returns string

  • Returns the current touch support detector, which defaults to a function returning true, if the "ontouchstart" event is supported on the current element.

    Returns ValueFn<GElement, Datum, boolean>

  • Sets the touch support detector to the specified boolean value and returns the drag behavior.

    Touch event listeners are only registered if the detector returns truthy for the corresponding element when the drag behavior is applied. The default detector works well for most browsers that are capable of touch input, but not all; Chrome’s mobile device emulator, for example, fails detection.

    Parameters

    • touchable: boolean

      A boolean value. true when touch event listeners should be applied to the corresponding element, otherwise false.

    Returns DragBehavior<GElement, Datum, Subject>

  • Sets the touch support detector to the specified function and returns the drag behavior.

    Touch event listeners are only registered if the detector returns truthy for the corresponding element when the drag behavior is applied. The default detector works well for most browsers that are capable of touch input, but not all; Chrome’s mobile device emulator, for example, fails detection.

    Parameters

    • touchable: ValueFn<GElement, Datum, boolean>

      A touch support detector function, which returns true when touch event listeners should be applied to the corresponding element. The function is evaluated for each selected element to which the drag behavior was applied, 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.

    Returns DragBehavior<GElement, Datum, Subject>

Properties

[metadata]: DecoratorMetadataObject
arguments: any
caller: Function
length: number
name: string

Returns the name of the function. Function names are read-only and can not be changed.

prototype: any