From a574b78cdb13b63a68d725c9b6a54889c5d925ca Mon Sep 17 00:00:00 2001 From: ts_salikhov Date: Thu, 13 Oct 2022 09:44:59 +0400 Subject: [PATCH] =?UTF-8?q?=D0=9D=D0=B0=20=D1=81=D1=82=D1=80=D0=B0=D0=BD?= =?UTF-8?q?=D0=B8=D1=86=D0=B5=20=D0=9D=D0=B0=D1=80=D0=B0=D0=B1=D0=BE=D1=82?= =?UTF-8?q?=D0=BA=D0=B0=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD?= =?UTF-8?q?=20=D1=81=D0=B1=D1=80=D0=BE=D1=81=20=D0=B4=D0=B0=D1=82=D1=8B=20?= =?UTF-8?q?=D0=B8=20=D0=B2=D1=8B=D0=B4=D0=B5=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5?= =?UTF-8?q?=20=D0=B4=D0=B0=D0=BD=D0=BD=D1=8B=D1=85=20=D0=BF=D1=80=D0=B8=20?= =?UTF-8?q?=D0=BD=D0=B0=D0=B2=D0=B5=D0=B4=D0=B5=D0=BD=D0=B8=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../d3/D3HorizontalPercentChart.tsx | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) 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(({ const [divRef, { width, height }] = useElementSize() const rootRef = useRef(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(({ 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('.axis.x.bottom').call(xAxisBottom) - root.selectChild('.axis.x.top').call(xAxisTop) + r.selectChild('.axis.x.bottom').call(xAxisBottom) + r.selectChild('.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('.axis.y.left').call(d3.axisLeft(yScale)) + const r = root() + if (width < 100 || height < 100 || !r) return + r.selectChild('.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('.data') - .selectAll('rect') + const selectedRects = r.selectChild('.data') + .selectAll('rect') selectedRects.attr('fill', (d) => d.color || 'black') .attr('y', (d) => yScale(d.name) ?? null)