Options
All
  • Public
  • Public/Protected
  • All
Menu

Class Canvas

An object responsible for rendering the network, storing application state, and dispatching/receiving events.

Hierarchy

Index

Methods

Methods

add

  • add(attrs?: ElementObjArg<CanvasAttrs, null>): 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<CanvasAttrs, null>): 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<CanvasAttrs, null>

      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, null>

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

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

dispatch

  • dispatch(event: DispatchEvent): 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.

edge

  • Selects a single edge using a (source, target, optional ID) tuple.

    The optional ID is used to distinguish multi-edges. The full string ID of the edge will take the form "source-target(-ID)". If the edge has directed set to false, 'source' and 'target' can be provided in any order, as long as they do not contain the "-" character.

    When accessing edges using string IDs, e.g. through Canvas.attrs, the following rules apply:

    • New edges with IDs in the form "source-target(-ID)" will automatically initialize their source/target attributes.
    • For edges with directed set to false, "target-source(-ID)" will fall back to "source-target(-ID)".

    Type parameters

    • ID: EdgeId

    Parameters

    • id: ID

    Returns EdgeSelection<ID>

    A new selection corresponding to the given edge.

edgelayout

  • edgelayout(edgelayout: EdgeLayout): this

edgelength

  • edgelength(edgelength: NumAttr): this

  • Sets the average length of all edges. This only applies if Canvas.edgelayout is not "individual". The default average edge length is 70.

    Parameters

    • edgelength: NumAttr

      The average edge length.

    Returns this

edges

  • Selects multiple edges using a list of (source, target, optional ID) tuples, see Canvas.edge.

    If no list is provided, all existing edges will be selected.

    Type parameters

    • ID: EdgeId

    Parameters

    • Optional ids: ReadonlyArray<ID>

      A list of (source, target) or (source, target, ID) tuples.

    Returns EdgeSelection<ID>

    A new selection corresponding to the given edges.

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 canvas label by its ID. Use "*" to select all existing labels.

    Type parameters

    Parameters

    • id: ID

      A label ID.

    Returns LabelSelection<ID>

    A new selection corresponding to the given label.

labels

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

    Type parameters

    Parameters

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

      A list of label IDs.

    Returns LabelSelection<ID>

    A new selection corresponding to the given labels.

message

  • message(message: string): this

  • Adds a message to the current event queue. Together with Canvas.onmessage, this can be used to detect when a queue reaches a certain point in execution.

    Parameters

    • message: string

      A message string.

    Returns this

node

  • Selects a node by its ID. Use "*" to select all existing nodes.

    Type parameters

    Parameters

    • id: ID

      A node ID. Avoid using the "-" character.

    Returns NodeSelection<ID>

    A new selection corresponding to the given node.

nodes

  • Selects multiple nodes using an list of ID values. If no list is provided, all existing nodes will be selected.

    Type parameters

    Parameters

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

      A list of node IDs. Avoid using the "-" character.

    Returns NodeSelection<ID>

    A new selection corresponding to the given nodes.

ondispatch

  • ondispatch(fn: (event: DispatchEvent) => void): this

  • Registers a callback function to listen for all dispatched events, see Canvas.dispatch.

    This will override the default event handler.

    Parameters

    • fn: (event: DispatchEvent) => void

      A callback function which receives a partial event object.

        • (event: DispatchEvent): void

        • Parameters

          • event: DispatchEvent

          Returns void

    Returns this

onmessage

  • onmessage(message: string | "*", fn: (message: string) => void): this

  • Registers a callback function for messages sent by Canvas.message. Use "*" to listen for all messages.

    Parameters

    • message: string | "*"

      The message to listen for, or "*" to listen for all messages.

    • fn: (message: string) => void

      A callback function. When using "*", the exact message will be provided as an argument.

        • (message: string): void

        • Parameters

          • message: string

          Returns void

    Returns this

onreceive

  • onreceive(fn: (event: ReceiveEvent) => void): void

  • Registers a callback function for all events sent back by the client, in the form:

    • error:
      • type: "attribute" (invalid attributes), "unknown".
      • message: The error message.
    • message: A message, as sent by Canvas.message.
    • nodes:
      • [id]:
        • click: True if the node was clicked.
        • hoverin: True if the mouse hovered over the node.
        • hoverout: True if the mouse exited the node.

    Parameters

    • fn: (event: ReceiveEvent) => void

      A callback function which receives a partial event object.

        • (event: ReceiveEvent): void

        • Parameters

          • event: ReceiveEvent

          Returns void

    Returns void

pan

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

    Parameters

    • pan: [NumAttr, NumAttr]

      An (x, y) tuple describing the new pan location.

    Returns this

panlimit

  • Restricts the movement of the canvas camera to the given bounding box, centered at (0,0).

    The default pan limit is (-Infinity, Infinity).

    Parameters

    • panlimit: [NumAttr, NumAttr]

      A (width/2, height/2) tuple describing the bounding box.

    Returns this

pause

  • pause(seconds: number): this

queue

  • Selects a single event queue by its ID. The default queue has ID 0. Use "*" to select all existing queues.

    By default, any changes made to the queue (e.g. start/stop) will take place immediately. However, if ElementSelection.withQ was previously called, the changes themselves will be added as events onto the current queue.

    Parameters

    • Default value id: AnyId = 0

      A queue ID. Defaults to 0.

    Returns QueueSelection

    A new selection corresponding to the given queue.

queues

  • Selects multiple event queues using an list of ID values, see Canvas.queue.

    If no list is provided, all existing queues will be selected.

    Parameters

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

      A list of queue IDs.

    Returns QueueSelection

    A new selection corresponding to the given queues.

receive

  • receive(event: ReceiveEvent): this

  • Simulates an event being received from the client, see Canvas.onreceive.

    Parameters

    • event: ReceiveEvent

      A partial event object.

    Returns this

remove

  • remove(): this

size

  • Sets the width and height of the canvas.

    This will determine the coordinate system, and will update the width and height attributes of the main SVG element, unless otherwise specified with ElementSelection.svgattr. Size is not animated by default.

    Parameters

    Returns this

svgattr

  • svgattr(key: string, value: ElementArg<string | number, null>): 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, null>

      The value of the SVG attribute.

    Returns this

visible

  • visible(visible: ElementArg<boolean, null>): 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.

zoom

  • Sets the zoom level of the canvas camera. A zoom level of 2.0 will make objects appear twice as large, 0.5 will make them half as large, etc.

    Parameters

    • zoom: NumAttr

      The new zoom level.

    Returns this

zoomlimit

  • Restricts the zoom level of the canvas camera to the given range. The lower bound describes how far out the camera can zoom, while the upper bound describes the maximum enlarging zoom.

    The default zoom limit is (0.1, 10).

    Parameters

    • zoomlimit: [NumAttr, NumAttr]

      A (min, max) tuple describing the zoom limit.

    Returns this

zoomtoggle

  • zoomtoggle(zoomtoggle: boolean): this

  • Sets whether or not zooming requires the ctrl/cmd key to be held down. Disabled by default.

    Parameters

    • zoomtoggle: boolean

      True if the ctrl/cmd key is required, false otherwise.

    Returns this

Generated using TypeDoc