Options
All
  • Public
  • Public/Protected
  • All
Menu

A plot of the graph of a function.

Hierarchy

Implements

Index

Constructors

constructor

  • Constructs a new graph capable of displaying a function in the form of x -> y. The user is able to drag, zoom-in, and zoom-out on the graph to explore the shape and form of the function.

    Parameters

    • fn: function
        • (x: number): number
        • Parameters

          • x: number

          Returns number

    • options: PlotOptions

    Returns Plot

Properties

classList

classList: DOMTokenList

Class attribute for the root element.

clipGroup

clipGroup: Group

displayCircle

displayCircle: Circle

A display circle to display input and output

fPath

fPath: Path

Represents the path taken by the function.

grid

grid: Group

A group containing the grid lines

rect

rect: Rectangle

Invisible element for registering events

root

root: SVGSVGElement

staticGroup

staticGroup: Group

This static group gets translated along witht he viewPort, but elements retain their original sizing.

style

style: CSSStyleDeclaration

Style for the root element.

update

update: function

The update function describes how this element should update itself

Type declaration

    • (): void
    • Returns void

viewPort

viewPort: SVG

This view port is a coordinate system where things are scaled using svg's internal representatino of scaling.

xAxis

xAxis: Line

A line to represent the x-axis of this graph

xRect

xRect: Rectangle

xText

xText: Text

yAxis

yAxis: Line

A line to represent the y-axis of this graph

yRect

yRect: Rectangle

yText

yText: Text

Static controller

controller: Controller = new Controller()

The controller manages the dependencies between elements. Every element is added to this controller upon creation.

Static count

count: number = 0

This number uniquely identifes elements

Static disable

disable: boolean = false

Allows for the events attatched to elements to be disabled.

Accessors

function

function:

Sets the internal function to the provided function Returns the internal function

height

height:

Returns the height of this svg element. Sets the height of this svg element to the provided value.

id

id:

Returns the unique generated identifier associated with this element.

originX

originX:

originY

originY:

viewBox

viewBox:

width

width:

Return the width of this svg element. Set the width of this svg element.

x

x:

y

y:

Methods

a

  • a(href: string): A
  • Constructs and appends an 'a' (link) element within this element.

    Parameters

    • href: string

    Returns A

addDependency

appendChild

  • appendChild<T>(child: T): T

call

  • call(x: number, trim?: boolean): number
  • Returns the result of calling the internal function with the provided function scaling both the input and the output.

    Parameters

    • x: number
    • Default value trim: boolean = false

    Returns number

circle

  • circle(cx: number, cy: number, r: number): Circle
  • Parameters

    • cx: number
    • cy: number
    • r: number

    Returns Circle

clear

  • clear(): void
  • Removes all child elements from this element.

    Returns void

clipPath

  • Constructs and appends a 'clipPath' element within this element.

    Returns ClipPath

contains

  • contains(element: Element): boolean
  • Returns true if this element contains the argument element.

    Parameters

    Returns boolean

defs

  • defs(): Defs
  • Returns Defs

description

draw

  • draw(startX?: number, endX?: number, trim?: boolean): void
  • Draws the internal function over the interval [startX, endX]. The default interval is [ minX - width, maxX + width ] so that when a user drags the graph there is enough drawn so that a translate may be applied instead of having to call draw again.

    Parameters

    • Default value startX: number = this._x - this._width
    • Default value endX: number = this._x + 2*this._width
    • Default value trim: boolean = false

    Returns void

drawGrid

  • drawGrid(): void
  • Returns void

ellipse

  • ellipse(cx: number, cy: number, rx: number, ry: number): Ellipse
  • Parameters

    • cx: number
    • cy: number
    • rx: number
    • ry: number

    Returns Ellipse

export

  • export(): SVG
  • Returns SVG

format

  • format(n: number): string
  • Formats the input number to be displayed within the graph.

    Parameters

    • n: number

    Returns string

getAttribute

getBoundingBox

  • getBoundingBox(): SVGRect
  • Returns the bounding box of this element. Note, this is different from the getBoundingClientRect method since the bounding box is affected by the current viewPort.

    If this element's root is not a SVGGraphics element as is the case for the marker, title, and more element, then null is returned instead of a DOMRect.

    Returns SVGRect

getXLabelPoints

  • getXLabelPoints(): Point[]
  • Returns Point[]

getYLabelPoints

  • getYLabelPoints(): Point[]
  • Returns Point[]

group

handleMouseDown

  • handleMouseDown(event: MouseEvent): void
  • When a user mouses down over this graph a drag is active.

    Parameters

    • event: MouseEvent

    Returns void

handleMouseLeave

  • handleMouseLeave(event: MouseEvent): void
  • When the user's mouse leaves the graph deactivates any concurrent drag.

    Parameters

    • event: MouseEvent

    Returns void

handleMouseMove

  • handleMouseMove(event: MouseEvent): void
  • Handle when a mouse moves over this graph. If a drag event is active then translates the position of the graph to the new location.

    Parameters

    • event: MouseEvent

    Returns void

handleMouseUp

  • handleMouseUp(_event: MouseEvent): void
  • Deactivates the current drag event.

    Parameters

    • _event: MouseEvent

    Returns void

handleMouseWheelEvent

  • handleMouseWheelEvent(event: WheelEvent): void
  • Zooms in and out on this graph. TODO: There is some jarring wheel action where an active wheel event on the page will stop dead when the mouse goes over the graph. Also it seems as if the scroll has pre-existing "momentum" that it can also affect the graph.

    Parameters

    • event: WheelEvent

    Returns void

internalToAbsolute

  • Parameters

    Returns Point

line

  • line(x1: number, y1: number, x2: number, y2: number): Line
  • Parameters

    • x1: number
    • y1: number
    • x2: number
    • y2: number

    Returns Line

marker

  • marker(refX: number, refY: number, width: number, height: number): Marker
  • Constructs and appends a 'marker' element within this element.

    Parameters

    • refX: number
    • refY: number
    • width: number
    • height: number

    Returns Marker

metadata

path

  • path(d: string): Path
  • Parameters

    • d: string

    Returns Path

polygon

  • Parameters

    • points: string

    Returns Polygon

prependChild

  • prependChild<T>(child: T): T

rectangle

  • rectangle(x: number, y: number, width: number, height: number): Rectangle
  • Parameters

    • x: number
    • y: number
    • width: number
    • height: number

    Returns Rectangle

remove

  • remove(): void

script

  • Constructs and appends a 'script' element within this element.

    Returns Script

setAttribute

setOrigin

  • setOrigin(x: number, y: number): void
  • This moves the origin of the plot to the location (x,y) relative to the size of the plot. For example, if the plot is 600 wide and 300 tall, placing the origin at (100,100) move the origin to the point 100 units in the x direction and 100 units in the y direction from the top left corner of the plot.

    Parameters

    • x: number
    • y: number

    Returns void

setViewBox

  • setViewBox(): void
  • Updates the position of the static group and sets the viewbox on the viewPort element.

    Returns void

svg

  • svg(x: number, y: number, width: number, height: number): SVG
  • Parameters

    • x: number
    • y: number
    • width: number
    • height: number

    Returns SVG

symbol

text

  • text(x: number, y: number, str: string): Text
  • Parameters

    • x: number
    • y: number
    • str: string

    Returns Text

title

updateDependents

  • updateDependents(): void

updateDisplayCircle

  • updateDisplayCircle(): void
  • Updates the display circle based on its current cx position, also updates the display text elements to represent the position of the display circle.

    Returns void

use

  • use(x: number, y: number, width: number, height: number): Use
  • Parameters

    • x: number
    • y: number
    • width: number
    • height: number

    Returns Use

Static SVG

  • SVG(idOrElement: string | HTMLElement, x?: number, y?: number, width?: number, height?: number): SVG
  • Constructs and returns a SVG object within the DOM. If the provided argument is an HTMLElement appends the interactive within that element. If the provided a value is a string, appends the interactive within the HTML element with the corresponding ID. If no element is found throws an error.

    Parameters

    • idOrElement: string | HTMLElement
    • Optional x: number
    • Optional y: number
    • Optional width: number
    • Optional height: number

    Returns SVG

Static clear

  • clear(disable?: boolean): void
  • Clears the static data structures holding elements and resets the count.

    Parameters

    • Default value disable: boolean = false

    Returns void

Legend

  • Module
  • Object literal
  • Variable
  • Function
  • Function with type parameter
  • Index signature
  • Type alias
  • Type alias with type parameter
  • Enumeration
  • Enumeration member
  • Property
  • Method
  • Interface
  • Interface with type parameter
  • Constructor
  • Property
  • Method
  • Index signature
  • Class
  • Class with type parameter
  • Constructor
  • Property
  • Method
  • Accessor
  • Index signature
  • Inherited constructor
  • Inherited property
  • Inherited method
  • Inherited accessor
  • Protected property
  • Protected method
  • Protected accessor
  • Private property
  • Private method
  • Private accessor
  • Static property
  • Static method

Generated using TypeDoc