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.
_renderEnd
_renderEnd: number
The semantic end coordinate of what is currently rendered.
_renderParams
_renderParams: undefined | P
The last used render parameters.
_renderStart
_renderStart: number
The semantic start coordinate of what is currently rendered.
_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.
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.
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.
scaleExtent
scaleExtent: None
A list of two numbers that define the extent to which a zoom event is allowed to transform the TrackChart’s underlying scale. Simply put, this controls how far in and out a user will be able to zoom. The first number is the maximum zoom-out factor, and the second is the maximum zoom-in factor. For example, setting this to [1, 10] will prevent a user from zooming out past the point at which the chart is initially rendered, and allow them to zoom in by a factor of 10. For more info, see https://github.com/d3/d3-zoom/blob/master/README.md#zoom_scaleExtent
translateExtent
translateExtent: (chart: Chart <any>): None
This is a callback function that is used to set the translate extent (left/right panning) allowed when a zoom event is applied to the TrackChart. It needs to be a callback, because it needs the absolute width of the TrackChart’s SVG viewport, which is allowed to change throughout the TrackChart’s lifetime. For example, setting this to: (chart) => [[0, 0], [chart.width, chart.height]] will restrict the panning in the TrackChart to exactly the range that was initially rendered. For more info, see https://github.com/d3/d3-zoom/blob/master/README.md#zoom_translateExtent
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.
xScaleBase
xScaleBase: ScaleLinear <number, number>
The base D3 scale that will be used to rescale the Chart’s xScale.
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.
renderEnd
get renderEnd(): number
Getter for the renderEnd property
renderParams
get renderParams(): P
Getter for the Chart’s most recently used RenderParams.
set renderParams(params: P): void
Setter for the renderParms property.
renderStart
get renderStart(): number
Getter for the renderStart 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
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
rescaleXScale
rescaleXScale(transformArg: Transform): void
This rescales the Chart’s x translation scale. If a transform argument is provided, it will use that. Otherwise, it will use the Chart’s internal transform object.
Parameters
transformArg: Transform
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
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
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