@gsdev99

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

https://codepen.io/gsdev99/pen/RwNmpoO
Всем привет. Подскажите, пожалуйста, как решить следующую задачу.
У меня есть реализация графика (кривой) с анимацией. И реализация градиента. При изменении стэйта (в данном случае на ресайз), кривая нормально перерисовывается, с градиентом же проблема, его предыдущее состояние сохраняется. Каким образом мне сохранив transition, перерисовывать градиент?
  • Вопрос задан
  • 72 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега React
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} />;
};
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы