Options
All
  • Public
  • Public/Protected
  • All
Menu

Class LabelSelection<D>

A selection of labels.

Type parameters

  • D

Hierarchy

Index

Methods

Methods

add

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

align

  • Sets alignment of the label's text.

    This will affect the direction in which text is appended, as well as its positioning relative to the label's base position. For example, an alignment of "top-left" will ensure that the top left corner of the label is located at the base position.

    A special "radial" alignment can be used to dynamically calculate the label's alignment based on its LabelSelection.angle and LabelSelection.rotate attributes, such that text is optimally positioned around an element.

    Parameters

    • align: ElementArg<LabelAlign, D>

      A string describing the alignment, typically in the form "vertical-horizontal". The full list is below:

      "top-left", "top-middle", "top-right", "middle-left", "middle", "middle-right", "bottom-left", "bottom-middle", "bottom-right", "radial"

    Returns this

angle

attrs

  • attrs(attrs: ElementObjArg<LabelAttrs, 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<LabelAttrs, D>

      An attribute dictionary.

    Returns this

color

  • Sets the color of the label's text.

    The default color is "gray" in most cases.

    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<LabelAttrs, 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.

font

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

pos

  • Sets the position of the label relative to its parent element.

    If the parent is a node, (0,0) will be the node's center. If the parent is an edge connecting two nodes, (0,0) will be the midpoint between the two nodes. If the parent is a looping edge connecting one node, (0,0) will be a point on the node's boundary.

    Parameters

    Returns this

radius

remove

  • remove(): this

rotate

  • Sets whether the label should be rotated by LabelSelection.angle degrees.

    The exact rotation will also depend on the label's alignment. For example, an alignment of "top-center" together with an angle of 90 degrees will result in the text being upside-down.

    Parameters

    • rotate: ElementArg<boolean, D>

      True if the label should be rotated.

    Returns this

size

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

text

  • text(text: ElementArg<string | number, D>): this

  • Sets the text displayed by the label.

    The newline character ("\n") can be used to break the text into multiple lines.

    Parameters

    • text: ElementArg<string | number, D>

      The text displayed by the label.

    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