Interface Graph

Defines a graph with optional attributes on nodes and edges. Directed and undirected graphs are supported, as well as self-loops and multiple edges between nodes.

Hierarchy

  • Graph

Properties

_adjacency? _positions? constraints? decorations? directed edges hasParents? nodes styles?

Properties

Optional _adjacency

_adjacency?: {
    [k: string]: unknown;
}

Type declaration

  • [k: string]: unknown

Optional _positions

_positions?: {
    [k: string]: [number, number];
}

mapping from node names to array holding (x,y) coordinates of the node

Type declaration

  • [k: string]: [number, number]

Optional constraints

constraints?: {
    constraints?: string[];
    meaning?: string;
}[]

Array of positioning constraints on node (x,y) coordinates of nodes, where (0,0) is the bottom-left point of the canvas, with x-coordinates increasing to the right and y-coordinates increasing to the top. Positioning requests for nodes should be treated as requests for corresponding constraints on the node positions.

Type declaration

  • Optional constraints?: string[]
  • Optional meaning?: string

Optional decorations

decorations?: {
    [k: string]: {
        fillColor?: FillColor;
        fillStyle?: FillStyle;
        fontFamily?: FontFamily;
        fontSize?: FontSize;
        lineColor?: LineColor;
        lineStyle?: LineStyle;
        lineWidth?: LineWidth;
        region?: {
            height: number;
            width: number;
            [k: string]: unknown;
        };
        style?: Style;
        text?: string;
        type: "text" | "region";
        x: number;
        y: number;
        [k: string]: unknown;
    };
}

maps decoration names to decoration objects (texts and rectangles to display on top of the graph)

Type declaration

  • [k: string]: {
        fillColor?: FillColor;
        fillStyle?: FillStyle;
        fontFamily?: FontFamily;
        fontSize?: FontSize;
        lineColor?: LineColor;
        lineStyle?: LineStyle;
        lineWidth?: LineWidth;
        region?: {
            height: number;
            width: number;
            [k: string]: unknown;
        };
        style?: Style;
        text?: string;
        type: "text" | "region";
        x: number;
        y: number;
        [k: string]: unknown;
    }
    • [k: string]: unknown
    • Optional fillColor?: FillColor
    • Optional fillStyle?: FillStyle
    • Optional fontFamily?: FontFamily
    • Optional fontSize?: FontSize
    • Optional lineColor?: LineColor
    • Optional lineStyle?: LineStyle
    • Optional lineWidth?: LineWidth
    • Optional region?: {
          height: number;
          width: number;
          [k: string]: unknown;
      }
      • [k: string]: unknown
      • height: number

        Relative height of region (as proportion of canvas height)

      • width: number

        Relative width of region (as proportion of canvas width)

    • Optional style?: Style
    • Optional text?: string

      Text overlay

    • type: "text" | "region"
    • x: number

      x-coordinate of the center (left boundary of canvas is zero, right boundary is one)

    • y: number

      y-coordinate of the center (lower boundary of canvas is zero, upper boundary is one)

directed

directed: boolean

true if graph is directed (a graph is directed if it has any directed edges), false if undirected

edges

edges: {
    [k: string]: {
        angleEntering?: number;
        angleLeaving?: number;
        arrowStyle?: ArrowStyle;
        data?: {
            [k: string]: string | number | boolean;
        };
        fontColor?: FontColor;
        fontFamily?: FontFamily;
        fontSize?: FontSize;
        fontStyle?: FontStyle;
        fontVariant?: FontVariant;
        fontWeight?: FontWeight;
        label?: Label;
        labelAnchor?: TextAnchor;
        labelOffset?: Offset;
        lineColor?: LineColor;
        lineStyle?: LineStyle;
        lineWidth?: LineWidth;
        loopDirection?: number;
        softnessEntering?: number;
        softnessLeaving?: number;
        source: string;
        style?: Style;
        target: string;
        weight?: number;
        weightOffset?: Offset;
    };
}

maps edge names to attribute objects; by default, an edge from node A to node B is named AB

Type declaration

  • [k: string]: {
        angleEntering?: number;
        angleLeaving?: number;
        arrowStyle?: ArrowStyle;
        data?: {
            [k: string]: string | number | boolean;
        };
        fontColor?: FontColor;
        fontFamily?: FontFamily;
        fontSize?: FontSize;
        fontStyle?: FontStyle;
        fontVariant?: FontVariant;
        fontWeight?: FontWeight;
        label?: Label;
        labelAnchor?: TextAnchor;
        labelOffset?: Offset;
        lineColor?: LineColor;
        lineStyle?: LineStyle;
        lineWidth?: LineWidth;
        loopDirection?: number;
        softnessEntering?: number;
        softnessLeaving?: number;
        source: string;
        style?: Style;
        target: string;
        weight?: number;
        weightOffset?: Offset;
    }
    • Optional angleEntering?: number

      angle relative to the direction between the node centers; in undirected graphs, the node whose name is second lexographically is taken as the target for this purpose.

    • Optional angleLeaving?: number

      angle relative to the direction between the node centers; in undirected graphs, the node whose name is first lexographically is taken as the source for this purpose.

    • Optional arrowStyle?: ArrowStyle
    • Optional data?: {
          [k: string]: string | number | boolean;
      }

      Key-value pairs specifying extra data associated with this edge. Any properties not in the schema should be specified in this object.

      • [k: string]: string | number | boolean
    • Optional fontColor?: FontColor
    • Optional fontFamily?: FontFamily
    • Optional fontSize?: FontSize
    • Optional fontStyle?: FontStyle
    • Optional fontVariant?: FontVariant
    • Optional fontWeight?: FontWeight
    • Optional label?: Label
    • Optional labelAnchor?: TextAnchor
    • Optional labelOffset?: Offset
    • Optional lineColor?: LineColor
    • Optional lineStyle?: LineStyle
    • Optional lineWidth?: LineWidth
    • Optional loopDirection?: number

      For self-loop edges, the angle at which the loop points, counter-clockwise from positive x direction

    • Optional softnessEntering?: number

      controls the curvature of an edge near the target node

    • Optional softnessLeaving?: number

      controls the curvature of an edge near the source node

    • source: string

      name of the node from which the edge originates

    • Optional style?: Style
    • target: string

      name of the node to which the edge connects

    • Optional weight?: number

      An optional numeric value associated with the edge.

    • Optional weightOffset?: Offset

Optional hasParents

hasParents?: boolean

True if user tells us that the graph is a tree or DAG or specifies an explicit parent-child relation between any two nodes. Given a parent-child relation means, include an edge from parent to child. This property should be automatically updated when parent-child relations are specified.

nodes

nodes: {
    [k: string]: {
        data?: {
            [k: string]: string | number | boolean;
        };
        fillColor?: FillColor;
        fillStyle?: FillStyle;
        fontColor?: FontColor;
        fontFamily?: FontFamily;
        fontSize?: FontSize;
        fontStyle?: FontStyle;
        fontVariant?: FontVariant;
        fontWeight?: FontWeight;
        label?: Label;
        labelAnchor?: TextAnchor;
        labelOffset?: Offset;
        lineColor?: LineColor;
        lineStyle?: LineStyle;
        lineWidth?: LineWidth;
        nodeShape?: "circle" | "double-circle" | "square" | "diamond" | "triangle" | "ellipse" | "rectangle" | "invisible";
        nodeSize?: number;
        nodeWidthToHeight?: number;
        style?: Style;
    };
}

maps node names to attribute objects

Type declaration

  • [k: string]: {
        data?: {
            [k: string]: string | number | boolean;
        };
        fillColor?: FillColor;
        fillStyle?: FillStyle;
        fontColor?: FontColor;
        fontFamily?: FontFamily;
        fontSize?: FontSize;
        fontStyle?: FontStyle;
        fontVariant?: FontVariant;
        fontWeight?: FontWeight;
        label?: Label;
        labelAnchor?: TextAnchor;
        labelOffset?: Offset;
        lineColor?: LineColor;
        lineStyle?: LineStyle;
        lineWidth?: LineWidth;
        nodeShape?: "circle" | "double-circle" | "square" | "diamond" | "triangle" | "ellipse" | "rectangle" | "invisible";
        nodeSize?: number;
        nodeWidthToHeight?: number;
        style?: Style;
    }
    • Optional data?: {
          [k: string]: string | number | boolean;
      }

      Extra data associated with this node as key-value pairs. Any properties not in the schema should be specified in this object.

      • [k: string]: string | number | boolean
    • Optional fillColor?: FillColor
    • Optional fillStyle?: FillStyle
    • Optional fontColor?: FontColor
    • Optional fontFamily?: FontFamily
    • Optional fontSize?: FontSize
    • Optional fontStyle?: FontStyle
    • Optional fontVariant?: FontVariant
    • Optional fontWeight?: FontWeight
    • Optional label?: Label
    • Optional labelAnchor?: TextAnchor
    • Optional labelOffset?: Offset
    • Optional lineColor?: LineColor
    • Optional lineStyle?: LineStyle
    • Optional lineWidth?: LineWidth
    • Optional nodeShape?: "circle" | "double-circle" | "square" | "diamond" | "triangle" | "ellipse" | "rectangle" | "invisible"
    • Optional nodeSize?: number

      Node size relative to a base size; if not specified, the node size is 1

    • Optional nodeWidthToHeight?: number

      Width to height ratio of a node; if not specified, the ratio is 1

    • Optional style?: Style

Optional styles

styles?: {
    [k: string]: {
        arrowStyle?: ArrowStyle;
        fillColor?: FillColor;
        fontColor?: FontColor;
        fontFamily?: FontFamily;
        fontSize?: FontSize;
        fontStyle?: FontStyle;
        fontVariant?: FontVariant;
        fontWeight?: FontWeight;
        labelAnchor?: TextAnchor;
        lineColor?: LineColor;
        lineStyle?: LineStyle;
        lineWidth?: LineWidth;
        nodeShape?: NodeShape;
        nodeSize?: NodeSize;
        nodeWidthToHeight?: NodeWidthToHeight;
        [k: string]: unknown;
    };
}

mapping from style names to style definition objects

Type declaration

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc