How to Implement
We need to use d3-zoom, d3-selection, and d3-scale to support programmatically zooming into the given genomic range.
Applying the zoom behaviour to Plot.domOverlay will trigger a track to be navigated (example)
|
// Apply the zoom behavior to the overlay div |
|
select<HTMLElement, unknown>(plot.domOverlay).call(zoomBehavior); |
where Plot is defined as
|
export interface Plot { |
|
addInteractor(interactor: (plot: Plot) => void): Plot; |
|
domOverlay: HTMLElement; |
|
orientation?: 'horizontal' | 'vertical'; |
|
width: number; |
|
height: number; |
|
xDomain: Signal<[number, number]>; |
|
yDomain?: Signal<[number, number]>; |
|
zoomed(xScale: ScaleLinear<number, number>, yScale: ScaleLinear<number, number>): void; |
|
} |
How to Implement
We need to use
d3-zoom,d3-selection, andd3-scaleto support programmatically zooming into the given genomic range.Applying the zoom behaviour to
Plot.domOverlaywill trigger a track to be navigated (example)gosling.js/src/interactors/pan-zoom.ts
Lines 60 to 61 in addb561
where
Plotis defined asgosling.js/src/tracks/utils.ts
Lines 18 to 27 in addb561