Options
All
  • Public
  • Public/Protected
  • All
Menu

Class ElementSelection<T, D>

A selection of elements. Inherited by nodes, edges, labels and the canvas itself.

Type parameters

  • T: ElementAttrs

  • D

Hierarchy

Index

Methods

Methods

add

  • add(attrs?: ElementObjArg<T, D>): this

  • Adds all selected elements to the canvas with the given initial attributes.

    Parameters

    Returns this

    A new instance of the current selection with animations disabled, to allow for further attribute initialisation.

attrs

  • attrs(attrs: ElementObjArg<T, D>): this

  • Applies a dictionary of attributes to all selected elements.

    All attributes correspond to the available methods. Most attribute endpoints can be provided either as a single value, or as partial dictionary in the form:

    The whole dictionary, or any of its direct entries, can be provided as an ElementFn.

    example
    nodes.size([20, 30])
    .pos((_, i) => [i * 10, 0])
    .svgattr("stroke", "blue")
    .duration(2.5).color("red")

// is equivalent to
node.attrs({
   size: [20, 30],
   pos: (_, i) => [i * 10, 0],
   svgattrs: { stroke: "blue" },
   color: {
       value: "red",
       duration: 2.5,
   },
})

    Parameters

    • attrs: ElementObjArg<T, D>

      An attribute dictionary.

    Returns this

data

  • Binds the selection to a list of data values. This will determine the data argument to provide whenever an ElementFn is used.

    You can also provide a function to map the current data list to a new one.

    Type parameters

    • ND

    Parameters

    • data: ReadonlyArray<ND> | ElementFn<ND, D>

      Either a list of data values (which must have the same length as the number of elements in the selection), or a function which maps the current data list.

    Returns ElementSelection<T, ND>

    A new instance of the current selection bound to the given data.

duration

  • duration(seconds: number): this

  • Configures the duration of all animations triggered by the selection. A duration of 0 will ensure that changes occur immediately. The default duration is usually 0.5.

    Parameters

    • seconds: number

      The animation duration, in seconds.

    Returns this

    A new instance of the current selection using the given animation duration.

ease

  • ease(ease: AnimEase): this

  • Configures the ease function used in all animations triggered by the selection. This will affect the way attributes transition from one value to another. More information is available here: https://github.com/d3/d3-ease.

    Parameters

    • ease: AnimEase

      The name of the ease function, based on the functions found in D3. The full list is below:

      "linear", "poly", "poly-in", "poly-out", "poly-in-out", "quad", "quad-in", "quad-out", "quad-in-out", "cubic", "cubic-in", "cubic-out", "cubic-in-out", "sin", "sin-in", "sin-out", "sin-in-out", "exp", "exp-in", "exp-out", "exp-in-out", "circle", "circle-in", "circle-out", "circle-in-out", "elastic", "elastic-in", "elastic-out", "elastic-in-out", "back", "back-in", "back-out", "back-in-out", "bounce", "bounce-in", "bounce-out", "bounce-in-out".

    Returns this

    A new instance of the current selection using the given animation ease.

highlight

  • highlight(seconds?: undefined | number): this

  • Returns a new selection through which all attribute changes are temporary. This is typically used to draw attention to a certain element without permanently changing its attributes.

    Parameters

    • Optional seconds: undefined | number

      The amount of time attributes should remain 'highlighted', in seconds, before changing back to their original values. Defaults to 0.5.

    Returns this

    A new instance of the current selection, where all attribute changes are temporary.

pause

  • pause(seconds: number): this

  • Adds a pause to the current event queue. The pause will only start once all previous pauses have finished. This is a shortcut for QueueSelection.pause.

    Parameters

    • seconds: number

      The duration of the pause, in seconds.

    Returns this

remove

  • remove(): this

svgattr

  • svgattr(key: string, value: ElementArg<string | number, D>): this

  • Sets a custom SVG attribute on the element. The root SVG tag is <shape> for nodes, <path> for edges, <text> for labels, and <svg> for the canvas.

    Note that when using ElementSelection.attrs, SVG attributes should be provided as a dictionary under the key svgattrs.

    Parameters

    • key: string

      The name of the SVG attribute.

    • value: ElementArg<string | number, D>

      The value of the SVG attribute.

    Returns this

visible

  • Sets whether or not the selected elements should be visible. In contrast to removing, visibility will not reset attributes or layout state.

    Parameters

    Returns this

withQ

  • withQ(queue?: AnyId | null): this

  • Sets the event queue to use for all events triggered by the selection. Each queue handles events independently, and all queues execute in parallel, which enables multiple animations to run simultaneously.

    The null queue is special; all events added to it will execute immediately. The default queue has ID 0.

    Parameters

    • Default value queue: AnyId | null = 0

      The name of the queue. This can be any string or number, or null for the immediate queue. Defaults to 0.

    Returns this

    A new instance of the current selection using the given queue.

Generated using TypeDoc