Как правильно сделать Responsive svg (D3.js)?

Question

[gsdev99]

Все привет, подскажите, пожалуйста, как правильно сделать Responsive svg?
Ниже моя реализация, но я думаю, что есть подход более правильный.
https://codepen.io/gsdev99/pen/QWwmeKp

Answer 1

[profesor08]

На ресайз тебе не нужен throttle, убери его и будет работать четче.

Вот с такой штукой плохо кончишь, если вдруг у тебя в компоненте появится какой-то стейт. А он у тебя есть. Потому что при каждом изменении стейта, ты будешь добавлять дополнительный обработчик resize к window. Либо как-то удаляй предыдущие обработчики, либо делай иначе, например добавив флаг, который будет сигнализировать, чтоб обработчик уже висит, и добавлять его еще раз не нужно.

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

Лично я бы вынес это дело в отдельный store на mobx, где будет обновляться ширина, а компонент будет обновляться когда надо.

Comments

[gsdev99]

Спасибо. А, если например, добавить:

// return () => window.removeEventListener('resize', onResize);
const onResize = () => {
    
    if (!node.current) {
      return false
    }

    const bounds = node.current.getBoundingClientRect()
    changeWidth(bounds.width)
    
    return () => window.removeEventListener('resize', onResize);
  }

?

[profesor08]

gsdev99, тупо напиши console.log() и смотри что у тебя происходит