Проблемы с изменением размера и расположением круговой диаграммы. используя D3.js и React. Потенциальные проблемы с CSS ⇐ CSS

[Anonymous]

Я работал над созданием нескольких визуализаций S&P 500, используя D3.js и React. В основном использую React для рендеринга и D3 для преобразования данных в элементы пути.
Я работаю над круговой диаграммой. Я хотел создать круговую диаграмму, чтобы отобразить ежегодные веса секторов индекса S&P 500 за разные годы, и использовать ползунок из пользовательского интерфейса Mantine, чтобы иметь возможность прокручивать каждый год. Для маркировки круговой диаграммы я создал фильтр, который брал информацию о данных круговой диаграммы (левые метки и правые метки) и перемещал ее слева и справа от круговой диаграммы. Я поместил эти левые и правые метки в отдельные элементы div, чтобы их было легче перемещать в макетах с разными размерами экрана.
Проблема
Когда я прокручиваю визуализацию круговой диаграммы с помощью ползунка пользовательского интерфейса Mantine, кажется, что круговая диаграмма меняет положение и размер, особенно когда вы прокручиваете ее до 2021 и 2020 годов. Возможно, это динамический размер круговой диаграммы. SVG диаграммы или охватывающий ее div, но я не могу отследить причину этой проблемы. Как мне:
1.) Обеспечить, чтобы круговая диаграмма сохраняла постоянную ширину, высоту, радиус и положение при прокрутке каждого набора данных? Я думаю, что это связано с динамическим изменением размера левой и правой меток, а также влияет на динамический размер центральной круговой диаграммы, но я не знаю, как это исправить.
2.) Держите элементы div левой и правой меток как можно ближе к центральной круговой диаграмме, но не перекрываясь?
3.) убедитесь, что круговая диаграмма увеличивается в размерах. размер относительно размера экрана, на котором отображается приложение? Для этого я использую медиа-запросы в Tailwind и почти уверен, что настроил их правильно.
Сейчас я работаю над PieChart3.jsx в репозиторииБуду очень признателен за любую помощь в исправлении моего кода! Спасибо!
Вот ссылка на мой проект и ссылка на исходный код:
Развернутый в настоящее время проект: https://drcasas2 .github.io/sp500dataviz/
Связанный репозиторий GitHub: https://github.com/drcasas2/sp500dataviz.git
# Что я пробовал
Я попробовал установить статическую ширину и высоту для SVG и Div, содержащих визуализацию круговой диаграммы, но размер и положение круговой диаграммы все равно изменились. Я также попытался настроить значения ширины и высоты, найденные в App.jsx, и изменил их на статические измерения вместо границ границ.высоты и границ.ширины, чтобы проверить, не в этом ли проблема, но решения не добился.
Когда я пытаюсь использовать статические размеры, круговая диаграмма не заполняет страницу, или метки слева или справа от круговой диаграммы находятся слишком далеко от круговой диаграммы, чтобы это было возможно. четко читаемо.
Я попробовал посмотреть пути и размеры разделов в Chrome Dev Tools и заметил, что метки слева и справа от меток меняют ширину при прокрутке различных круговых диаграмм. , поэтому это может повлиять на размер и положение круговой диаграммы, но я не знаю, как это исправить.

Подробнее здесь: https://stackoverflow.com/questions/786 ... tential-cs