Options
All
  • Public
  • Public/Protected
  • All
Menu

Class EdgeSelection<D>

A selection of edges.

Type parameters

  • D

Hierarchy

Index

Methods

Methods

add

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

      An attribute dictionary.

    Returns this

color

  • Sets the color of the edge. The default color is "light-gray".

    Parameters

    • color: ElementArg<string, D>

      A CSS color string.

    Returns this

curve

  • Sets the curve function used to interpolate the edge's path.

    The default setting is "cardinal". More information is available here: https://github.com/d3/d3-shape#curves.

    Parameters

    • curve: ElementArg<EdgeCurve, D>

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

      "basis", "bundle", "cardinal", "catmull-rom", "linear", "monotone-x", "monotone-y", "natural", "step", "step-before", "step-after"

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

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

directed

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

  • Sets whether or not the edge should include an arrow pointing towards its target node.

    Parameters

    • directed: ElementArg<boolean, D>

      True if the edge should be directed, 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.

flip

  • Sets whether or not the edge should be 'flipped' after exceeding a certain angle, such that it is never rendered upside-down. This does not apply to looping edges.

    Parameters

    • flip: ElementArg<boolean, D>

      True if the edge should flip automatically, 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 edge label by its ID. 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 edge 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.

length

  • Sets the length of the edge. This will only take effect when [[CanvasSelection.edgelayout]] is set to "individual".

    Parameters

    Returns this

path

  • Sets a custom path for the edge. The path is a list of (x, y) tuples, which will automatically connect to the boundaries of the source and target nodes.

    If the edge connects two nodes, (0,0) will be the midpoint between the two nodes. If edge is a loop, (0,0) will be a point on the node's boundary.

    Parameters

    Returns this

pause

  • pause(seconds: number): 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

thickness

traverse

  • Sets the color of the edge using a traversal animation.

    If no source is provided, the first element in each edge tuple will be used.

    Parameters

    • color: ElementArg<string, D>

      A CSS color string.

    • Optional source: ElementArg<AnyId, D>

      The ID of the node from which the traversal animation should originate.

    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