Chart

class Chart<P extends RenderParams>

This is used to render Annotation objects as glyphs in the browser.

Type parameters

P: RenderParams

Constructors

(config: ChartConfig <P>): Chart

Type parameters

P: RenderParams

Parameters

config: ChartConfig

Properties

_axisAnn

_axisAnn: undefined | Annotation

The Annotation object that is used to render the horizontal axis (if enabled).

_containerSelection

_containerSelection: undefined | Selection <any, any, any, any>

A d3 selection of the Chart’s DOM container. This is a pre-existing DOM element (probably a div).

_padHeight

_padHeight: number

The height in pixels of the Chart’s SVG pad.

_padWidth

_padWidth: number

The width in pixels of the Chart’s SVG pad.

_renderParams

_renderParams: undefined | P

The last used render parameters.

_rowStripePatternSelection

_rowStripePatternSelection: undefined | Selection <SVGPatternElement, any, any, any>

A D3 selection of the SVG pattern that is used for row striping.

_rowStripeRectSelection

_rowStripeRectSelection: undefined | Selection <SVGRectElement, any, any, any>

A D3 Selection of the SVG rectangle that is used for row striping.

_selector

_selector: undefined | string

A string that can be used to uniquely select the target DOM container.

_transform

_transform: Transform

The Transform object that describes the current zoom transformation.

_viewportHeight

_viewportHeight: number

The height in pixels of the Chart’s SVG viewport.

_viewportWidth

_viewportWidth: number

The width in pixels of the Chart’s SVG viewport.

axisType

axisType: undefined | Bottom | Top

This indicates whether or not the Chart has a horizontal axis.

defSelection

defSelection: Selection <any, any, any, any>

A d3 selection of the Chart’s defs element. See: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

divHeight

divHeight: undefined | string | number

The CSS height property of the Chart’s div.

divMargin

divMargin: undefined | number

The CSS margin property of the Chart’s div.

divOutline

divOutline: undefined | string

The CSS outline property of the Chart’s div.

divOverflowX

divOverflowX: undefined | string

The CSS overflow-x property of the Chart’s div.

divOverflowY

divOverflowY: undefined | string

The CSS overflow-y property of the Chart’s div.

divSelection

divSelection: Selection <any, any, any, any>

A d3 selection of the Chart’s inner div. This is created when the Chart is instantiated and placed inside of the selected container in the DOM.

divWidth

divWidth: undefined | string | number

The CSS width property of the Chart’s div.

domainConstraint

domainConstraint: (chart: Chart <P>): None

This constrains the Chart’s domain, which in turn constrains both zoom level and panning. The parameter is a callback function that is evaluated after each zoom event to produce an interval that constrains the domain.

glyphModifiers

glyphModifiers: GlyphModifier <any, any> []

A list of GlyphModifiers that control the glyphs rendered in the Chart.

highlightSelection

highlightSelection: Selection <any, any, any, any>

A d3 selection of the Chart’s highlight.

id

id: string

A unique identifier for the Chart.

inRender

inRender: (params: P): void

The second rendering callback function.

initialDomain

initialDomain: None

The initialized domain of the Chart when render() is called with the initializeXScale flag.

leftPadSize

leftPadSize: number

The number of pixels of padding on the left side of the Chart.

lowerPadSize

lowerPadSize: number

The number of pixels of padding on the bottom of the Chart.

observers

observers: ChartObserver []

A list of observers attached to the Chart.

overflowViewportSelection

overflowViewportSelection: Selection <any, any, any, any>

A d3 selection of the Chart’s viewport that allows rendering overflow.

padSelection

padSelection: Selection <any, any, any, any>

A d3 selection of the viewport’s padding container.

padSize

padSize: number

The number of pixels of padding around each edge of the Chart.

postRender

postRender: (params: P): void

The final rendering callback function.

postResize

postResize: (): void

The callback function that the Chart executes after resize() is called.

postZoom

postZoom: (): void

The callback function that the Chart executes after zoom() is called.

preRender

preRender: (params: P): void

The first rendering callback function.

resizable

resizable: boolean

This controls whether or not the Chart has automatic resizing enabled.

rightPadSize

rightPadSize: number

The number of pixels of padding on the right side of the Chart.

rowCount

rowCount: number

The number of rows in the Chart.

rowHeight

rowHeight: number

The height in pixels of a horizontal row in the Chart. This defaults to a value of 10.

rowStripes

rowStripes: boolean

This controls whether or not the rows will be colored in an alternating pattern.

upperPadSize

upperPadSize: number

The number of pixels of padding on the top of the Chart.

viewportSelection

viewportSelection: Selection <any, any, any, any>

A d3 selection of the Chart’s viewport.

xScale

xScale: ScaleLinear <number, number>

A D3 scale that the Chart will use to translate between semantic and viewport coordinates. This scale will be periodically re-scaled after zoom events.

zoomConstraint

zoomConstraint: None

A Chart’s contents are scaled by a scaling factor k. If a zoomConstraint of the form [min_k, max_k] is provided, the scaling factor will be constrained to that range. This will not constrain panning.

zoomable

zoomable: boolean

This controls whether or not the Chart has zooming enabled.

Accessors

containerSelection

get containerSelection(): Selection <any, any, any, any>

Get a D3 selection of the Chart’s DOM Container. This throws an exception if the value is undefined, which probably means the entire chart is detached from the DOM.

padHeight

get padHeight(): number

Getter for the padHeight property.

set padHeight(height: number): void

Setter for the padHeight property. This actually adjusts the height attribute on the viewport DOM element.

padWidth

get padWidth(): number

Getter for the padWidth property.

set padWidth(width: number): void

Setter for the padWidth property. This actually adjusts the width attribute on the viewport DOM element.

renderParams

get renderParams(): P

Getter for the Chart’s most recently used RenderParams.

set renderParams(params: P): void

Setter for the renderParms property.

rowStripePatternSelection

get rowStripePatternSelection(): Selection <SVGPatternElement, any, any, any>

A getter for the rowStripePatternSelection property. This serves as a null guard.

rowStripeRectSelection

get rowStripeRectSelection(): Selection <SVGRectElement, any, any, any>

A getter for the rowStripeSelection property. This serves as a null guard.

selector

get selector(): string

A getter for the Chart’s selector property. The selector should be able to uniquely select the Chart’s DOM container.

transform

get transform(): Transform

Getter for the transform property. This also updates the internal transform on the Chart’s pad DOM element.

set transform(transform: Transform): void

Setter for the transform property.

viewportHeight

get viewportHeight(): number

Getter for the viewportHeight property.

set viewportHeight(height: number): void

Setter for the viewportHeight property. This actually adjusts the height property on the viewport DOM element.

viewportWidth

get viewportWidth(): number

Getter for the viewportWidth property.

set viewportWidth(width: number): void

Setter for the viewportWidth property. This actually adjusts the width property on the viewport DOM element.

Methods

addAxis

addAxis(force: boolean): void

If the Chart.axis property is set to true, this adds a horizontal axis to the Chart above the top row. Alternatively, if the force=true is supplied it will ignore the Chart.axis setting and add an axis anyway.

Parameters

force: boolean

Returns: void

addGlyphModifier

addGlyphModifier(modifier: GlyphModifier <A, C>, initialize: boolean): void

This adds a GlyphModifier to the Chart.

Type parameters

A: Annotation
C: Chart

Parameters

modifier: GlyphModifier <A, C>
initialize: boolean

Returns: void

alertObservers

alertObservers(): void

This calls each of this Chart’s attached observer’s alert() method.

Returns: void

applyGlyphModifiers

applyGlyphModifiers(): void

This applies each of the Chart’s GlyphModifier.zoom() methods, resulting in each of the glyphs in the Chart being appropriately redrawn for the current zoom level.

Returns: void

applyLayoutAndSetRowCount

applyLayoutAndSetRowCount(params: P): void

Selectively apply the layout as defined in the RenderParams argument and set the rowCount property to an appropriate value. If a rowCount is defined in the RenderParams, it will not be overwritten. If the RenderParams are configured such that no layout is applied, rowCount will be set to the max row property of the Annotations in the RenderParams.

Parameters

params: P

Returns: void

calculateContainerDimensions

calculateContainerDimensions(): DOMRect

This uses d3 to select the Chart’s DOM container and returns a DOMRect that describes that containers dimensions.

Returns: DOMRect

calculateDivDimensions

calculateDivDimensions(): DOMRect

Returns: DOMRect

calculatePadDimensions

calculatePadDimensions(): DOMRect

This returns a DOMRect that describes the pad dimensions.

Returns: DOMRect

calculatePadHeight

calculatePadHeight(): number

This calculates and returns the width of the SVG viewport in pixels.

Returns: number

calculatePadWidth

calculatePadWidth(): number

This calculates and returns the width of the SVG viewport in pixels.

Returns: number

calculateViewportDimensions

calculateViewportDimensions(): DOMRect

This returns a DOMRect that describes the viewport’s dimensions.

Returns: DOMRect

calculateViewportHeight

calculateViewportHeight(): number

This checks the current height of the viewport in the DOM and returns it.

Returns: number

calculateViewportWidth

calculateViewportWidth(): number

This calculates the current width of the viewport in the DOM and returns it.

Returns: number

clear

clear(): void

This method clears all glyphs that have been rendered in the Chart.

Returns: void

clearHighlight

clearHighlight(selector: string): void

Clear highlights from the Chart. If a selector is supplied, only the highlight that matches that selector will be removed. Otherwise, all highlights will be removed.

Parameters

selector: string

Returns: void

configureResize

configureResize(): void

This configures the Chart to respond to browser resize events. The default resize behavior is for the Chart to maintain the current semantic view range, either stretching or shrinking the current view.

Returns: void

configureZoom

configureZoom(): void

This configures the chart’s viewport to appropriately handle browser zoom events.

Returns: void

defaultInRender

defaultInRender(params: P): void

Type parameters

P: RenderParams

Parameters

params: P

Returns: void

defaultPostRender

defaultPostRender(): void

Type parameters

P: RenderParams

Returns: void

defaultPreRender

defaultPreRender(params: P): void

Parameters

params: P

Returns: void

disableZoom

disableZoom(): void

This disables zooming on the Chart.

Returns: void

domainFromMousemoveEvent

domainFromMousemoveEvent(transform: Transform, sourceEvent: WheelEvent, domainConstraint: None): None

This method produces a new domain from a browser mousemove event.

Parameters

transform: Transform
sourceEvent: WheelEvent
domainConstraint: None

Returns: None

domainFromWheelEvent

domainFromWheelEvent(transform: Transform, sourceEvent: WheelEvent, domainConstraint: None): None

This method produces a new domain from a browser wheel event.

Parameters

transform: Transform
sourceEvent: WheelEvent
domainConstraint: None

Returns: None

fitPadHeight

fitPadHeight(): void

This fits the Chart’s SVG padding based off of the rowCount, rowHeight and padSize properties.

Returns: void

fitRowStripes

fitRowStripes(): void

This automatically sets the dimensions of the row stripe DOM elements.

Returns: void

fitViewport

fitViewport(): void

This fits the Chart’s SVG viewport based off of the Chart’s pad size.

Returns: void

getContainerHeight

getContainerHeight(): number

This calculates and returns the Chart’s DOM container’s height in pixels.

Returns: number

getContainerWidth

getContainerWidth(): number

This calculates and returns the Chart’s DOM container’s width in pixels.

Returns: number

getSemanticViewRange

getSemanticViewRange(): ViewRange

Get the semantic coordinate range of what is currently shown in the Chart’s viewport.

Returns: ViewRange

highlight

highlight(config: HighlightConfig): string

This method highlights a region in the Chart. If no selector is provided, one will be auto generated and returned by the function.

Parameters

config: HighlightConfig

Returns: string

initializeXScale

initializeXScale(start: number, end: number): void

This initializes an x translation scale with the provided coordinates and the dimensions of the Chart.

Parameters

start: number
end: number

Returns: void

initializeXScaleFromRenderParams

initializeXScaleFromRenderParams(params: P): void

This initializes an x translation scale with the provided RenderParams and the dimensions of the Chart.

Parameters

params: P

Returns: void

render

render(params: P): void

This method stores the render parameters on the Chart and calls preRender(), inRender(), and postRender().

Parameters

params: P

Returns: void

resetTransform

resetTransform(): void

Reset the Chart’s transform to the zoom identity (no translation, no zoom).

Returns: void

resize

resize(): void

This resizes the Chart. If the Chart has resizing enabled, this is called automatically when a browser zoom event occurs.

Returns: void

setDomain

setDomain(domain: None): void

Set the domain of the Chart’s x scale.

Parameters

domain: None

Returns: void

setRange

setRange(range: None): void

Set the range of the Chart’s x scale.

Parameters

range: None

Returns: void

setRowStripes

setRowStripes(): void

This initializes the DOM elements that form the row stripes in the Chart, if enabled.

Returns: void

setToContainerDimensions

setToContainerDimensions(): void

This calculates the Chart’s DOM container’s dimensions and sets the Chart’s SVG pad to fill those dimensions.

Returns: void

squareToContainerHeight

squareToContainerHeight(): void

This calculates the height of the Chart’s DOM container and sets the Chart’s SVG pad to a square with that height.

Returns: void

squareToContainerWidth

squareToContainerWidth(): void

This calculates the width of the Chart’s DOM container and sets the Chart’s SVG pad to a square with that width.

Returns: void

squareToDivWidth

squareToDivWidth(): void

Returns: void

updateDivProperties

updateDivProperties(): void

Returns: void

updateRange

updateRange(): void

Set the range of the Chart’s x scale to the viewport dimensions.

Returns: void

zoom

zoom(): void

This is the handler method that will be called when the Chart’s viewport receives a browser zoom event.

Returns: void

zoomHighlight

zoomHighlight(): void

Returns: void

inferRenderRange

inferRenderRange(params: P): None

A utility function to attempt to infer a semantic range on RenderParams when no range is explicitly supplied.

Type parameters

P: RenderParams

Parameters

params: P

Returns: None