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