How to make Responsive svg (D3.js) correctly?

Question

JavaScript

Hello everyone, tell me, please, how to make Responsive svg correctly?
Below is my implementation, but I think there is a better approach.
https://codepen.io/gsdev99/pen/QWwmeKp

Answer 1

On resize you don't need throttle, remove it and it will work more clearly.
With such a thing, you will end badly if you suddenly have some kind of state in the component. And you have it. Because every time you change the state, you will add an additional handler resizeto window. Either delete the previous handlers somehow, or do it differently, for example, by adding a flag that will signal that the handler is already hanging, and you don’t need to add it again.

useEffect(() => {
    window.addEventListener('resize', onResize)
  }, [])

Personally, I would take this matter to a separate storeone mobx, where the width will be updated, and the component will be updated when necessary.