Options
All
  • Public
  • Public/Protected
  • All
Menu

Class NodeSelection<D>

A selection of nodes.

Type parameters

  • D

Hierarchy

Index

Methods

Methods

add

  • add(attrs?: ElementObjArg<NodeAttrs, 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<NodeAttrs, 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<NodeAttrs, D>

      An attribute dictionary.

    Returns this

color

  • Sets the color of the node. The default color is "dark-gray".

    Parameters

    • color: ElementArg<string, D>

      A CSS color string.

    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<NodeAttrs, ND>

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

draggable

  • draggable(draggable: ElementArg<boolean, D>): this

  • Sets whether the node can be manually dragged around.

    Parameters

    • draggable: ElementArg<boolean, D>

      True if the node should be draggable, false otherwise.

    Returns this

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.

fixed

  • When set to true, this prevents the node from being automatically moved during the layout process. This does not affect manual dragging.

    Parameters

    • fixed: ElementArg<boolean, D>

      True if the position of the node should be fixed, false otherwise.

    Returns this

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.

label

  • Selects a single node label by its ID. The node's default 'value label' has ID 0. Use "*" to select all existing labels.

    Parameters

    • Default value id: AnyId = 0

      A label ID. Defaults to 0.

    Returns LabelSelection<D>

    A new selection corresponding to the given label, with the same data as the current selection.

labels

  • Selects multiple node labels using a list of ID values. If no list is provided, all existing labels will be selected.

    Parameters

    • Default value ids: ReadonlyArray<AnyId> = ['*']

      A list of label IDs.

    Returns LabelSelection<D>

    A new selection corresponding to the given labels, with the same data as the current selection.

onclick

  • Registers a callback function to listen for node click events.

    This will override any previous callback.

    Parameters

    • fn: ElementFn<void, D>

      A callback function taking the node's data and, optionally, index.

    Returns this

onhoverin

  • Registers a callback function to listen for node mouse-over events, triggered when the mouse enters the node.

    This will override any previous callback.

    Parameters

    • fn: ElementFn<void, D>

      A callback function taking the node's data and, optionally, index.

    Returns this

onhoverout

  • Registers a callback function to listen for node mouse-over events, triggered when the mouse leaves the node.

    This will override any previous callback.

    Parameters

    • fn: ElementFn<void, D>

      A callback function taking the node's data and, optionally, index.

    Returns this

pause

  • pause(seconds: number): this

pos

  • Sets the position of the node. The canvas uses a Cartesian coordinate system with (0,0) at the center.

    Parameters

    Returns this

remove

  • remove(): this

shape

  • Sets the shape of the node.

    Parameters

    • shape: ElementArg<NodeShape, D>

      One of the following strings:

      • "circle" (default): Circular node with a single radius dimension.
      • "rect": Rectangular node with separate width and height dimensions, and corner rounding.
      • "ellipse": Elliptical node with separate width and height dimensions.

    Returns this

size

  • Sets the size of the node using a (width/2, height/2) tuple.

    If a single value is provided, it will be used for both dimensions. If the node is a circle, width/2 is the radius and height is ignored.

    Note that size can be set relative to the node's current size using string expressions, e.g. "1.5x" for circles or ("1.5x", "1.5y") for rectangles.

    The default size is (12, 12).

    Parameters

    Returns 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

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