diff --git a/src/components/d3/D3Chart.tsx b/src/components/d3/D3Chart.tsx index dff01e6..2aedeab 100644 --- a/src/components/d3/D3Chart.tsx +++ b/src/components/d3/D3Chart.tsx @@ -93,6 +93,11 @@ export type D3ChartProps = React.DetailedHTMLProp /** Параметры блока легенды */ legend?: BasePluginSettings & D3LegendSettings } + /** Добавление зума графику */ + zoom?: { + /** Массив коэффициентов приближения k0 - минимальный k1 - максимальный коэффициент */ + scaleExtent: [k0: number, k1: number] + } } const getDefaultXAxisConfig = (): ChartAxis => ({ @@ -115,6 +120,7 @@ const _D3Chart = >({ ticks, plugins, dash, + zoom, ...other }: D3ChartProps) => { const xAxisConfig = usePartialProps>(_xAxisConfig, getDefaultXAxisConfig) @@ -360,17 +366,18 @@ const _D3Chart = >({ }, [redrawCharts]) useEffect(() => { - if (!svgRef) return - const zoom = d3.zoom() - .scaleExtent([1, 5]) - .translateExtent([[0, 0], [width, height]]) + if (!svgRef || !zoom) return + const zoomBehavior = d3.zoom() + .scaleExtent(zoom.scaleExtent) + .translateExtent([[0, 0], [width - offset.left - offset.right, height - offset.top - offset.bottom]]) + .extent([[0, 0], [width - offset.left - offset.right, height - offset.top - offset.bottom]]) .on('zoom', () => { const zoomState = d3.zoomTransform(svgRef) setCurrentZoomState(zoomState) }) - d3.select(svgRef).call(zoom) - }, [svgRef, width, height, offset]) + d3.select(svgRef).call(zoomBehavior) + }, [svgRef, zoom, width, height, offset]) return ( >({ - + >({ /> - + ({ + scaleExtent: [1, 5] + }), []) + return ( ) })