RadialChart

class RadialChart<P extends RenderParams>

This Chart class is designed for rendering features in a circular context, e.g. bacterial genomes.

Type parameters

P: RenderParams

Constructors

(config: RadialChartConfig <P>): RadialChart

Type parameters

P: RenderParams

Parameters

config: RadialChartConfig

Properties

_divHeight

_divHeight: undefined | string

The CSS height property of the Chart’s div.

_divMargin

_divMargin: undefined | string | 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.

_divWidth

_divWidth: undefined | string

The CSS width property of the Chart’s div.

_padHeight

_padHeight: undefined | string

The stored value of the pad SVG height property.

_padWidth

_padWidth: undefined | string

The stored value of the pad SVG width property.

_renderParams

_renderParams: undefined | P

The last used render parameters.

_transform

_transform: Transform

The Transform object that describes the current zoom transformation.

_viewportHeight

_viewportHeight: undefined | string

The stored value of the viewport SVG height property.

_viewportWidth

_viewportWidth: undefined | string

The stored value of the viewport SVG width property.

axisConfig

axisConfig: HorizontalAxisConfig <any, any>

This sets the styling properties for the default axis produced by addAxis(), which is called in the default draw() implementation.

containerSelection

containerSelection: Selection <any, any, any, any>

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

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

divSelection

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

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

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.

draw

draw: (params: P): void

The rendering callback that should be responsible for drawing glyphs with the rendering API.

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.

initialDomain

initialDomain: None

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

innerRadius

innerRadius: number

The inner radius of the Chart in pixels.

layout

layout: VerticalLayout

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.

notchAngle

notchAngle: number

The angle (in radians) of the “notch” at the top of the radial chart.

observers

observers: ChartObserver []

A list of observers attached to the Chart.

outerRadius

outerRadius: number

The outer radius of the Chart in pixels.

outerRadiusRatio

outerRadiusRatio: number

The outer radius of the Chart expressed as the ratio (outer radius / viewport width).

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 callback function that the Chart executes after render() is called.

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.

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.

rowColors

rowColors: undefined | string []

A list of colors that will color the Chart’s rows in a repeating pattern.

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.

rowOpacity

rowOpacity: number

The opacity of the colored row stripes.

selector

selector: string

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

trackHeight

trackHeight: number

The “height” of the radial track on which annotations will be rendered. Conceptually, this is equal to to the difference of the radii of two concentric circles that define an annulus.

trackHeightRatio

trackHeightRatio: number

The track height expressed as the ratio ( track height / viewport width)

trackOutlineSelection

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

A d3 selection to the track outline.

updateDimensions

updateDimensions: (params: P): void

The rendering callback function that should be responsible for updating the Chart’s DOM element dimensions.

updateDomain

updateDomain: (params: P): void

The rendering callback function that should be responsible for updating the domain of the Chart.xScale property.

updateLayout

updateLayout: (params: P): void

The rendering callback function that should be responsible for updating the Chart.layout property.

updateRowCount

updateRowCount: (params: P): void

The rendering callback function that should be responsible for updating the Chart.rowCount property.

upperPadSize

upperPadSize: number

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

viewportHeightPx

viewportHeightPx: number

The stored height of the viewport SVG in pixels.

viewportSelection

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

A d3 selection of the Chart’s viewport.

viewportWidthPx

viewportWidthPx: number

The stored width of the viewport SVG in pixels.

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.

yScale

yScale: (row: number): number

A simple function that maps from row numbers to the pixel y value of the corresponding row.

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

divHeight

get divHeight(): undefined | string | number

Gets the divHeight property.

set divHeight(value: undefined | string | number): void

Sets the divHeight property. This directly adjusts the height CSS style property on the Chart’s div element.

divMargin

get divMargin(): undefined | string | number

Gets the divMargin property.

set divMargin(value: undefined | string | number): void

Sets the divMargin property. This directly adjusts the margin CSS style property on the Chart’s div element.

divOutline

get divOutline(): undefined | string

Gets the divOutline property.

set divOutline(value: undefined | string): void

Sets the divOutline property. This directly adjusts the outline CSS style property on the Chart’s div element.

divOverflowX

get divOverflowX(): undefined | string

Gets the divOverflowX property.

set divOverflowX(value: undefined | string): void

Sets the divOverflowX property. This directly adjusts the overflow-x CSS style property on the Chart’s div element.

divOverflowY

get divOverflowY(): undefined | string

Gets the divOverflowY property.

set divOverflowY(value: undefined | string): void

Sets the divOverflowY property. This directly adjusts the overflow-y CSS style property on the Chart’s div element.

divWidth

get divWidth(): undefined | string | number

Gets the divWidth property.

set divWidth(value: undefined | string | number): void

Sets the divWidth property. This directly adjusts the width CSS style property on the Chart’s div element.

domain

get domain(): None

Gets the domain of the Chart’s x scale.

set domain(domain: None): void

Set the domain of the Chart’s x scale.

range

get range(): None

Gets the range of the Chart’s x scale.

set range(range: None): void

Set the range of the Chart’s x scale.

renderParams

get renderParams(): P

Getter for the Chart’s most recently used RenderParams.

set renderParams(params: P): void

Setter for the renderParams property.

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(): undefined | string | number

Gets the viewportHeight property.

set viewportHeight(value: undefined | string | number): void

Sets the viewportHeight property. This directly adjusts the height SVG attribute on the Chart’s viewport SVG element.

viewportWidth

get viewportWidth(): undefined | string | number

Gets the viewportWidth property.

set viewportWidth(value: undefined | string | number): void

Sets the viewportWidth property. This directly adjusts the width SVG attribute on the Chart’s viewport SVG element.

Methods

addAxis

addAxis(): void

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

addRowStripes

addRowStripes(): void

If the rowColors property has been defined, this method adds row stripes to the Chart.

Returns: void

addTrackOutline

addTrackOutline(): void

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

calculateContainerDimensions

calculateContainerDimensions(): DOMRect

This returns a DOMRect that describes the bounding box of the Chart’s container.

Returns: DOMRect

calculateContainerHeight

calculateContainerHeight(): number

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

Returns: number

calculateContainerWidth

calculateContainerWidth(): number

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

Returns: number

calculateDivDimensions

calculateDivDimensions(): DOMRect

This returns a DOMRect that describes the bounding box of the Chart’s div.

Returns: DOMRect

calculatePadDimensions

calculatePadDimensions(): DOMRect

This returns a DOMRect that describes the SVG pad dimensions.

Returns: DOMRect

calculatePadHeight

calculatePadHeight(): number

This calculates and returns the height of the SVG pad in pixels.

Returns: number

calculatePadWidth

calculatePadWidth(): number

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

Returns: number

calculateViewportDimensions

calculateViewportDimensions(): DOMRect

This returns a DOMRect that describes the bounding box of the viewport.

Returns: DOMRect

calculateViewportHeight

calculateViewportHeight(): number

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

Returns: number

calculateViewportWidth

calculateViewportWidth(): number

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

Returns: number

clear

clear(): void

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

Returns: void

clearHighlight

clearHighlight(selector: string): void

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

Returns: void

defaultDraw

defaultDraw(params: P): void

The default draw() callback. It adds a horizontal axis and renders the RenderParams.annotations property as rectangles.

Type parameters

P: RenderParams

Parameters

params: P

Returns: void

defaultPostRender

defaultPostRender(): void

The default postRender() callback. It calls the Chart.applyGlyphModifiers() method.

Type parameters

P: RenderParams

Returns: void

defaultUpdateDimensions

defaultUpdateDimensions(params: P): void

The default updateDimensions() callback. It calls updateDivHeight(), updatePadHeight(), and updateViewportHeight(). The result is that the Chart should be tall enough to render the number of rows specified in the rowCount property.

Type parameters

P: RenderParams

Parameters

params: P

Returns: void

defaultUpdateDomain

defaultUpdateDomain(params: P): void

The default updateDomain() callback. If the start and end properties are set on the RenderParams, it uses those to set the domain. If they are not defined, it finds the minimum start and maximum end amongst the annotations property on the RenderParams. If there are no annotations on the RenderParams, it leaves the domain alone.

Type parameters

P: RenderParams

Parameters

params: P

Returns: void

defaultUpdateLayout

defaultUpdateLayout(params: P): void

The default updateLayout() callback. It calls intervalGraphLayout() on the annotations property of the provided RenderParams.

Type parameters

P: RenderParams

Parameters

params: P

Returns: void

defaultUpdateRowCount

defaultUpdateRowCount(params: P): void

The default updateRowCount() callback. It sets Chart.rowCount equal to Chart.layout.rowCount.

Type parameters

P: RenderParams

Parameters

params: P

Returns: void

disableZoom

disableZoom(): void

This disables zooming on the Chart.

Returns: void

domainFromMousemoveEvent

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

Parameters

transform: Transform
sourceEvent: WheelEvent

Returns: None

domainFromWheelEvent

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

Parameters

transform: Transform
sourceEvent: WheelEvent

Returns: None

fitRadialDimensions

fitRadialDimensions(): void

Returns: void

highlight

highlight(config: HighlightConfig): string

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

removeRowStripes

removeRowStripes(): void

If they have been added, this method removes row stripes from the Chart.

Returns: void

render

render(params: P): void

This method executes the default rendering routine. It executes each rendering callback function in succession.

Parameters

params: P

Returns: void

renderTrackOutline

renderTrackOutline(): void

Returns: void

resetTransform

resetTransform(): void

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

Returns: void

resize

resize(): void

Returns: void

setDivStyle

setDivStyle(property: string, value: undefined | string): void

Sets a style property on the Chart’s div selection.

Parameters

property: string
value: undefined | string

Returns: void

setPadAttribute

setPadAttribute(attribute: string, value: undefined | string): void

Sets an attribute on the Chart’s SVG pad.

Parameters

attribute: string
value: undefined | string

Returns: void

setViewportAttribute

setViewportAttribute(attribute: string, value: undefined | string): void

Sets an attribute on the Chart’s SVG viewports.

Parameters

attribute: string
value: undefined | string

Returns: void

squareToDivWidth

squareToDivWidth(): void

Returns: void

updateDivHeight

updateDivHeight(): void

This updates the Chart’s div height to accommodate the rowHeight, rowCount, and pad sizes. If Chart._divHeight is explicitly defined, this will do nothing.

Returns: void

updateDivWidth

updateDivWidth(): void

This sets the Chart’s div width to 100%. If Chart._divWidth is explicitly defined, this will do nothing.

Returns: void

updatePadHeight

updatePadHeight(): void

This updates the Chart’s SVG pad height to accommodate the rowHeight, rowCount, and the upper/lower pad sizes. If Chart._padHeight is explicitly defined, this will do nothing.

Returns: void

updateRange

updateRange(): void

Returns: void

updateViewportHeight

updateViewportHeight(): void

Returns: void

updateViewportPosition

updateViewportPosition(): void

This updates the Chart’s SVG viewport positions to accommodate the left and upper pad sizes.

Returns: void

updateViewportProperties

updateViewportProperties(): void

This updates all of the viewport properties by calling updateViewportHeight(), updateViewportWidth(), and updateViewportPosition().

Returns: void

updateViewportWidth

updateViewportWidth(): void

Returns: void

zoom

zoom(): void

Returns: void

zoomHighlight

zoomHighlight(): void

Returns: void

getDomainFromAnnotations

getDomainFromAnnotations(annotations: Annotation []): None

Returns a domain given a list of Annotations.

Type parameters

P: RenderParams

Parameters

annotations: Annotation []

Returns: None