diff --git a/src/components/d3/D3HorizontalPercentChart.tsx b/src/components/d3/D3HorizontalPercentChart.tsx
index 2a532db..0b04bd0 100644
--- a/src/components/d3/D3HorizontalPercentChart.tsx
+++ b/src/components/d3/D3HorizontalPercentChart.tsx
@@ -37,8 +37,7 @@ export const D3HorizontalPercentChart = memo<D3HorizontalChartProps>(({
     const [divRef, { width, height }] = useElementSize()
     const rootRef = useRef<SVGGElement | null>(null)
 
-    const selectedRootRef = useCallback(() => rootRef.current ? d3.select(rootRef.current) : null, [rootRef.current])
-    const root = selectedRootRef()
+    const root = useCallback(() => rootRef.current ? d3.select(rootRef.current) : null, [rootRef.current])
 
     const inlineWidth = useMemo(() => width - offset.left - offset.right, [width])
     const inlineHeight = useMemo(() => height - offset.top - offset.bottom, [height])
@@ -47,32 +46,35 @@ export const D3HorizontalPercentChart = memo<D3HorizontalChartProps>(({
     const yScale = useMemo(() => d3.scaleBand().domain(data.map((d) => d.name)).range([0, inlineHeight]).padding(0.25), [data, inlineHeight])
 
     useEffect(() => { /// Отрисовываем оси X сверху и снизу
-        if (width < 100 || height < 100 || !root) return
+        const r = root()
+        if (width < 100 || height < 100 || !r) return
         const xAxisTop = d3.axisTop(xScale).tickFormat((d) => `${d}%`).ticks(4).tickSize(-inlineHeight)
         const xAxisBottom = d3.axisBottom(xScale).tickFormat((d) => `${d}%`).ticks(4)
 
-        root.selectChild<SVGGElement>('.axis.x.bottom').call(xAxisBottom)
-        root.selectChild<SVGGElement>('.axis.x.top').call(xAxisTop)
+        r.selectChild<SVGGElement>('.axis.x.bottom').call(xAxisBottom)
+        r.selectChild<SVGGElement>('.axis.x.top').call(xAxisTop)
             .selectAll('.tick')
             .attr('class', 'tick grid-line')
     }, [root, width, height, xScale, inlineHeight])
 
     useEffect(() => { /// Отрисовываем ось Y слева
-        if (width < 100 || height < 100 || !root) return
-        root.selectChild<SVGGElement>('.axis.y.left').call(d3.axisLeft(yScale))
+        const r = root()
+        if (width < 100 || height < 100 || !r) return
+        r.selectChild<SVGGElement>('.axis.y.left').call(d3.axisLeft(yScale))
     }, [root, width, height, yScale])
 
     useEffect(() => {
-        if (width < 100 || height < 100 || !root) return
+        const r = root()
+        if (width < 100 || height < 100 || !r) return
 
         const delay = d3.transition().duration(500).ease(d3.easeLinear)
 
-        const rects = root.selectChild('.data').selectAll('rect').data(data)
+        const rects = r.selectChild('.data').selectAll('rect').data(data)
         rects.enter().append('rect')
         rects.exit().remove()
 
-        const selectedRects = root.selectChild<SVGGElement>('.data')
-                                  .selectAll<SVGRectElement, PercentChartDataType>('rect')
+        const selectedRects = r.selectChild<SVGGElement>('.data')
+                               .selectAll<SVGRectElement, PercentChartDataType>('rect')
 
         selectedRects.attr('fill', (d) => d.color || 'black')
                      .attr('y', (d) => yScale(d.name) ?? null)