Components Interactions Examples Tutorials API FAQ
Options
Menu

Interface Selection

A grouped array of nodes.

Type parameters

  • Datum

    the data bound to this selection.

Hierarchy

  • Selection

Indexable

[index: number]: Group

Retrieve a grouped selection.

Index

Properties

length

length: number

The number of groups in this selection.

Methods

append

  • Appends a new child to each node in the selection. This child will inherit the parent's data (if available). Returns a fresh selection consisting of the newly-appended children.

    Parameters

    • name: string

      the element name to append. May be prefixed (see d3.ns.prefix).

    Returns Selection<Datum>

  • Appends a new child to each node in the selection by computing a new node. This child will inherit the parent's data (if available). Returns a fresh selection consisting of the newly-appended children.

    Parameters

    • name: function

      the function to compute a new element

        • (datum: Datum, index: number, outerIndex: number): EventTarget
        • Parameters

          • datum: Datum
          • index: number
          • outerIndex: number

          Returns EventTarget

    Returns Selection<Datum>

attr

  • Retrieve the value of the given attribute for the first node in the selection.

    Parameters

    • name: string

      The attribute name to query. May be prefixed (see d3.ns.prefix).

    Returns string

  • For all nodes, set the attribute to the specified constant value. Use null to remove.

    Parameters

    • name: string

      The attribute name, optionally prefixed.

    • value: Primitive

      The attribute value to use. Note that this is coerced to a string automatically.

    Returns Selection<Datum>

  • Derive an attribute value for each node in the selection based on bound data.

    Parameters

    • name: string

      The attribute name, optionally prefixed.

    • value: function

      The function of the datum (the bound data item), index (the position in the subgrouping), and outer index (overall position in nested selections) which computes the attribute value. If the function returns null, the attribute is removed.

        • (datum: Datum, index: number, outerIndex: number): Primitive
        • Parameters

          • datum: Datum
          • index: number
          • outerIndex: number

          Returns Primitive

    Returns Selection<Datum>

  • Set multiple properties at once using an Object. D3 iterates over all enumerable properties and either sets or computes the attribute's value based on the corresponding entry in the Object.

    Parameters

    • obj: object

      A key-value mapping corresponding to attributes and values. If the value is a simple string or number, it is taken as a constant. Otherwise, it is a function that derives the attribute value.

    Returns Selection<Datum>

call

  • call(func: function, ...args: any[]): Selection<Datum>
  • Call a function on the selection. sel.call(foo) is equivalent to foo(sel).

    Parameters

    • func: function

      the function to call on the selection

        • (sel: Selection<Datum>, ...args: any[]): any
        • Parameters

          Returns any

    • Rest ...args: any[]

      any optional args

    Returns Selection<Datum>

classed

  • classed(name: string): boolean
  • classed(name: string, value: boolean): Selection<Datum>
  • classed(name: string, value: function): Selection<Datum>
  • classed(obj: object): Selection<Datum>
  • Returns true if the first node in this selection has the given class list. If multiple classes are specified (i.e., "foo bar"), then returns true only if all classes match.

    Parameters

    • name: string

      The class list to query.

    Returns boolean

  • Adds (or removes) the given class list.

    Parameters

    • name: string

      The class list to toggle. Spaces separate class names: "foo bar" is a list of two classes.

    • value: boolean

      If true, add the classes. If false, remove them.

    Returns Selection<Datum>

  • Determine if the given class list should be toggled for each node in the selection.

    Parameters

    • name: string

      The class list. Spaces separate multiple class names.

    • value: function

      The function to run for each node. Should return true to add the class to the node, or false to remove it.

        • (datum: Datum, index: number, outerIndex: number): boolean
        • Parameters

          • datum: Datum
          • index: number
          • outerIndex: number

          Returns boolean

    Returns Selection<Datum>

  • Set or derive classes for multiple class lists at once.

    Parameters

    • obj: object

      An Object mapping class lists to values that are either plain booleans or functions that return booleans.

      • [key: string]: boolean | function

    Returns Selection<Datum>

data

  • data(): Datum[]
  • data<NewDatum>(data: NewDatum[], key?: function): Update<NewDatum>
  • data<NewDatum>(data: function, key?: function): Update<NewDatum>
  • Retrieves the data bound to the first group in this selection.

    Returns Datum[]

  • Binds data to this selection.

    Type parameters

    • NewDatum

    Parameters

    • data: NewDatum[]

      the array of data to bind to this selection

    • Optional key: function

      the optional function to determine the unique key for each piece of data. When unspecified, uses the index of the element.

        • (datum: NewDatum, index: number, outerIndex: number): string
        • Parameters

          • datum: NewDatum
          • index: number
          • outerIndex: number

          Returns string

    Returns Update<NewDatum>

  • Derives data to bind to this selection.

    Type parameters

    • NewDatum

    Parameters

    • data: function

      the function to derive data. Must return an array.

        • (datum: Datum, index: number, outerIndex: number): NewDatum[]
        • Parameters

          • datum: Datum
          • index: number
          • outerIndex: number

          Returns NewDatum[]

    • Optional key: function

      the optional function to determine the unique key for each data item. When unspecified, uses the index of the element.

        • (datum: NewDatum, index: number, outerIndex: number): string
        • Parameters

          • datum: NewDatum
          • index: number
          • outerIndex: number

          Returns string

    Returns Update<NewDatum>

datum

  • datum(): Datum
  • datum<NewDatum>(value: function): Selection<NewDatum>
  • datum<NewDatum>(value: NewDatum): Selection<NewDatum>
  • Return the data item bound to the first element in the selection.

    Returns Datum

  • Derive the data item for each node in the selection. Useful for situations such as the HTML5 'dataset' attribute.

    Type parameters

    • NewDatum

    Parameters

    • value: function

      the function to compute data for each node

        • (datum: Datum, index: number, outerIndex: number): NewDatum
        • Parameters

          • datum: Datum
          • index: number
          • outerIndex: number

          Returns NewDatum

    Returns Selection<NewDatum>

  • Set the data item for each node in the selection.

    Type parameters

    • NewDatum

    Parameters

    • value: NewDatum

      the constant element to use for each node

    Returns Selection<NewDatum>

each

  • Invoke the given function for each element in the selection. The return value of the function is ignored.

    Parameters

    • func: function

      the function to invoke

        • (datum: Datum, index: number, outerIndex: number): any
        • Parameters

          • datum: Datum
          • index: number
          • outerIndex: number

          Returns any

    Returns Selection<Datum>

empty

  • empty(): boolean

filter

  • Filters the selection, returning only those nodes that match the given CSS selector.

    Parameters

    • selector: string

      the CSS selector

    Returns Selection<Datum>

  • Filters the selection, returning only those nodes for which the given function returned true.

    Parameters

    • selector: function

      the filter function

        • (datum: Datum, index: number, outerIndex: number): boolean
        • Parameters

          • datum: Datum
          • index: number
          • outerIndex: number

          Returns boolean

    Returns Selection<Datum>

html

  • html(): string
  • html(value: string): Selection<Datum>
  • html(value: function): Selection<Datum>
  • Retrieve the HTML content of the first node in the selection. Uses 'innerHTML' internally and will not work with SVG or other elements without a polyfill.

    Returns string

  • Set the HTML content of every node in the selection. Uses 'innerHTML' internally and thus will not work with SVG or other elements without a polyfill.

    Parameters

    • value: string

      the HTML content to use.

    Returns Selection<Datum>

  • Compute the HTML content for each node in the selection. Uses 'innerHTML' internally and thus will not work with SVG or other elements without a polyfill.

    Parameters

    • value: function

      the function to compute HTML content

        • (datum: Datum, index: number, outerIndex: number): string
        • Parameters

          • datum: Datum
          • index: number
          • outerIndex: number

          Returns string

    Returns Selection<Datum>

insert

  • insert(name: string, before: string): Selection<Datum>
  • insert(name: string, before: function): Selection<Datum>
  • insert(name: function, before: string): Selection<Datum>
  • insert(name: function, before: function): Selection<Datum>
  • Inserts a new child to each node in the selection. This child will inherit its parent's data (if available). Returns a fresh selection consisting of the newly-inserted children.

    Parameters

    • name: string

      the element name to append. May be prefixed (see d3.ns.prefix).

    • before: string

      the selector to determine position (e.g., ":first-child")

    Returns Selection<Datum>

  • Inserts a new child to each node in the selection. This child will inherit its parent's data (if available). Returns a fresh selection consisting of the newly-inserted children.

    Parameters

    • name: string

      the element name to append. May be prefixed (see d3.ns.prefix).

    • before: function

      a function to determine the node to use as the next sibling

        • (datum: Datum, index: number, outerIndex: number): EventTarget
        • Parameters

          • datum: Datum
          • index: number
          • outerIndex: number

          Returns EventTarget

    Returns Selection<Datum>

  • Inserts a new child to the end of each node in the selection by computing a new node. This child will inherit its parent's data (if available). Returns a fresh selection consisting of the newly-inserted children.

    Parameters

    • name: function

      the function to compute a new child

        • (datum: Datum, index: number, outerIndex: number): EventTarget
        • Parameters

          • datum: Datum
          • index: number
          • outerIndex: number

          Returns EventTarget

    • before: string

      the selector to determine position (e.g., ":first-child")

    Returns Selection<Datum>

  • Inserts a new child to the end of each node in the selection by computing a new node. This child will inherit its parent's data (if available). Returns a fresh selection consisting of the newly-inserted children.

    Parameters

    • name: function

      the function to compute a new child

        • (datum: Datum, index: number, outerIndex: number): EventTarget
        • Parameters

          • datum: Datum
          • index: number
          • outerIndex: number

          Returns EventTarget

    • before: function

      a function to determine the node to use as the next sibling

        • (datum: Datum, index: number, outerIndex: number): EventTarget
        • Parameters

          • datum: Datum
          • index: number
          • outerIndex: number

          Returns EventTarget

    Returns Selection<Datum>

interrupt

  • Interrupts the active transition of the provided name. Does not cancel scheduled transitions.

    Parameters

    • Optional name: string

      the transition name (defaults to "")

    Returns Selection<Datum>

node

  • node(): EventTarget
  • Returns the first non-null element in the selection, or null otherwise.

    Returns EventTarget

on

  • on(type: string): function
  • on(type: string, listener: function, capture?: boolean): Selection<Datum>
  • Returns the listener (if any) for the given event.

    Parameters

    • type: string

      the type of event to load the listener for. May have a namespace (e.g., ".foo") at the end.

    Returns function

      • (datum: Datum, index: number, outerIndex: number): any
      • Parameters

        • datum: Datum
        • index: number
        • outerIndex: number

        Returns any

  • Adds a listener for the specified event. If one was already registered, it is removed before the new listener is added. The return value of the listener function is ignored.

    Parameters

    • type: string

      the of event to listen to. May have a namespace (e.g., ".foo") at the end.

    • listener: function

      an event listener function, or null to unregister

        • (datum: Datum, index: number, outerIndex: number): any
        • Parameters

          • datum: Datum
          • index: number
          • outerIndex: number

          Returns any

    • Optional capture: boolean

      sets the DOM useCapture flag

    Returns Selection<Datum>

order

  • Reorders nodes in the document to match the selection order. More efficient than calling sort() if the selection is already ordered.

    Returns Selection<Datum>

property

  • property(name: string): any
  • property(name: string, value: any): Selection<Datum>
  • property(name: string, value: function): Selection<Datum>
  • property(obj: object): Selection<Datum>
  • Retrieve an arbitrary node property such as the 'checked' property of checkboxes, or the 'value' of text boxes.

    Parameters

    • name: string

      the node's property to retrieve

    Returns any

  • For each node, set the property value. Internally, this sets the node property directly (e.g., node[name] = value), so take care not to mutate special properties like proto.

    Parameters

    • name: string

      the property name

    • value: any

      the property value

    Returns Selection<Datum>

  • For each node, derive the property value. Internally, this sets the node property directly (e.g., node[name] = value), so take care not to mutate special properties like proto.

    Parameters

    • name: string

      the property name

    • value: function

      the function used to derive the property's value

        • (datum: Datum, index: number, outerIndex: number): any
        • Parameters

          • datum: Datum
          • index: number
          • outerIndex: number

          Returns any

    Returns Selection<Datum>

  • Set multiple node properties. Caveats apply: take care not to mutate special properties like proto.

    Parameters

    • obj: object

      an Object whose keys correspond to node properties and values are either constants or functions that will compute a value.

      • [key: string]: any | function

    Returns Selection<Datum>

remove

  • Removes the elements from the DOM. They are in a detached state and may be re-added (though there is currently no dedicated API for doing so).

    Returns Selection<Datum>

select

  • Creates a subselection by finding the first descendent matching the selector string. Bound data is inherited.

    Parameters

    • selector: string

      the CSS selector to match against

    Returns Selection<Datum>

  • Creates a subselection by using a function to find descendent elements. Bound data is inherited.

    Parameters

    • selector: function

      the function to find matching descendants

        • (datum: Datum, index: number, outerIndex: number): EventTarget
        • Parameters

          • datum: Datum
          • index: number
          • outerIndex: number

          Returns EventTarget

    Returns Selection<Datum>

selectAll

  • selectAll(selector: string): Selection<any>
  • selectAll<T>(selector: string): Selection<T>
  • selectAll(selector: function): Selection<any>
  • selectAll<T>(selector: function): Selection<T>
  • Creates a subselection by finding all descendents that match the given selector. Bound data is not inherited.

    Parameters

    • selector: string

      the CSS selector to match against

    Returns Selection<any>

  • Creates a subselection by finding all descendants that match the given selector. Bound data is not inherited.

    Use this overload when data-binding a subselection (that is, sel.selectAll('.foo').data(d => ...)). The type will carry over.

    Type parameters

    • T

    Parameters

    • selector: string

    Returns Selection<T>

  • Creates a subselection by using a function to find descendent elements. Bound data is not inherited.

    Parameters

    • selector: function

      the function to find matching descendents

        • (datum: Datum, index: number, outerIndex: number): Array<EventTarget> | NodeList
        • Parameters

          • datum: Datum
          • index: number
          • outerIndex: number

          Returns Array<EventTarget> | NodeList

    Returns Selection<any>

  • Creates a subselection by using a function to find descendent elements. Bound data is not inherited.

    Use this overload when data-binding a subselection (that is, sel.selectAll('.foo').data(d => ...)). The type will carry over.

    Type parameters

    • T

    Parameters

    • selector: function

      the function to find matching descendents

        • (datum: Datum, index: number, outerIndex: number): Array<EventTarget> | NodeList
        • Parameters

          • datum: Datum
          • index: number
          • outerIndex: number

          Returns Array<EventTarget> | NodeList

    Returns Selection<T>

size

  • size(): number

sort

  • sort(comparator?: function): Selection<Datum>
  • Reorders nodes in the selection based on the given comparator. Nodes are re-inserted into the document once sorted.

    Parameters

    • Optional comparator: function

      the comparison function, which defaults to d3.ascending

        • (a: Datum, b: Datum): number
        • Parameters

          • a: Datum
          • b: Datum

          Returns number

    Returns Selection<Datum>

style

  • style(name: string): string
  • style(name: string, value: Primitive, priority?: string): Selection<Datum>
  • style(name: string, value: function, priority?: string): Selection<Datum>
  • style(obj: object, priority?: string): Selection<Datum>
  • Retrieve the computed style value for the first node in the selection.

    Parameters

    • name: string

      The CSS property name to query

    Returns string

  • Set a style property for all nodes in the selection.

    Parameters

    • name: string

      the CSS property name

    • value: Primitive

      the property value

    • Optional priority: string

      if specified, either null or the string "important" (no exclamation mark)

    Returns Selection<Datum>

  • Derive a property value for each node in the selection.

    Parameters

    • name: string

      the CSS property name

    • value: function

      the function to derive the value

        • (datum: Datum, index: number, outerIndex: number): Primitive
        • Parameters

          • datum: Datum
          • index: number
          • outerIndex: number

          Returns Primitive

    • Optional priority: string

      if specified, either null or the string "important" (no exclamation mark)

    Returns Selection<Datum>

  • Set a large number of CSS properties from an object.

    Parameters

    • obj: object

      an Object whose keys correspond to CSS property names and values are either constants or functions that derive property values

    • Optional priority: string

      if specified, either null or the string "important" (no exclamation mark)

    Returns Selection<Datum>

text

  • Retrieve the textContent of the first node in the selection.

    Returns string

  • Set the textContent of each node in the selection.

    Parameters

    • value: Primitive

      the text to use for all nodes

    Returns Selection<Datum>

  • Compute the textContent of each node in the selection.

    Parameters

    • value: function

      the function which will compute the text

        • (datum: Datum, index: number, outerIndex: number): Primitive
        • Parameters

          • datum: Datum
          • index: number
          • outerIndex: number

          Returns Primitive

    Returns Selection<Datum>

transition

  • Begins a new transition. Interrupts any active transitions of the same name.

    Parameters

    • Optional name: string

      the transition name (defaults to "")

    Returns Transition<Datum>

Generated using TypeDoc