Как правильно обновлять градиент в d3.js при перерендере?

Question

[gsdev99]

https://codepen.io/gsdev99/pen/RwNmpoO
Всем привет. Подскажите, пожалуйста, как решить следующую задачу.
У меня есть реализация графика (кривой) с анимацией. И реализация градиента. При изменении стэйта (в данном случае на ресайз), кривая нормально перерисовывается, с градиентом же проблема, его предыдущее состояние сохраняется. Каким образом мне сохранив transition, перерисовывать градиент?

Answer 1

[0xD34F]

const Gradient = ({ data, areaGenerator, height }) => {
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current) {
      d3.select(ref.current)
        .append('linearGradient')
        .attr('id', 'area-gradient')
        .attr('gradientUnits', 'userSpaceOnUse')
        .attr('x1', 0)
        .attr('y1', 0)
        .attr('x2', 0)
        .attr('y2', height)
        .selectAll('stop')
        .data([
          { offset: '0%', color: 'rgba(101, 60, 173, 0)' },
          { offset: '100%', color: 'rgba(101, 60, 173, 0.2)' }
        ])
        .enter()
        .append('stop')
        .attr('offset', d => d.offset)
        .attr('stop-color', d => d.color);

      d3.select(ref.current).append('path').attr('class', 'area');
    }
  }, [ ref.current ]);

  useEffect(() => {
    if (ref.current) {
      d3.select(ref.current)
        .select('.area')
        .datum(data)
        .transition()
        .duration(1000)
        .attr('d', areaGenerator);
    }
  }, [ ref.current, data ]);

  return <g className="gradient-generator" ref={ref} />;
};

Comments

[gsdev99]

Спасибо. Вы могли бы подсказать ещё один момент: если я данные помещаю в state:
const [data, setData] = useState(cData), то resize градиента перестает работать (внес изменения с учетом вашего ответа в codepen). Я так понимаю, что можно написать следующее:

useEffect(() => {
  console.log('useEffect()')

  // console.log('data', data)

  if (ref.current) {
    d3.select(ref.current)
    .select('.area')
    .datum(data)
    .transition()
    .duration(1000)
    .attr('d', areaGenerator)
  }

// }, [ref.current, data])
})

Но насколько, это правильно?