Как выполнить добавление списка классов к отдельной круговой диаграмме svg с тем же именем класса с помощью Intersection Observer - PullRequest
Новая
       49

Как выполнить добавление списка классов к отдельной круговой диаграмме svg с тем же именем класса с помощью Intersection Observer

0 голосов
/ 01 ноября 2019

Я работаю в научно-исследовательской организации. Я пытаюсь найти более интерактивные способы для организации отображать свои данные в блогах и т. Д., Которые относительно легко воспроизвести.

Я создал Intersection Observer, который запускает анимацию для круговой диаграммы. Вот Javascript для Обозревателя пересечений:

У меня есть Обозреватель пересечений, чтобы анимировать несколько круговых диаграмм на странице. Однако я не могу заставить их оживлять самостоятельно. По сути, первая круговая диаграмма, которую наблюдает наблюдатель пересечения, вызывает анимацию всех круговых диаграмм на странице.

Вот наблюдатель пересечения: 

 const pieChartWrapper = document.querySelectorAll(".pie-chart-wrapper");
 animateOptions = {
            root: null,
            threshold: 0,
            rootMargin: "-300px 0px"

        };
const animateCircleOnScroll = new IntersectionObserver(function(
            entries, animateCircleOnScroll) {
            entries.forEach(entry => {
                if (!entry.isIntersecting) {
                    return;
                } else {
                    const coverCircle = document.querySelectorAll(".cover-circle")
                    coverCircle.forEach(circle => {
                        circle.classList.add("cover-circle-animate");
                    })

                    animateCircleOnScroll.unobserve(entry.target);
                }
            });
        }, animateOptions);```

Because I've created the pie charts using SVGs, I think dropping in the HTML here would be too messy. FI you need to see the HTML, here is a link to a codepen where I've created in a hypothetical blog post with filler text:

https://codepen.io/robert-guttersohn/pen/yLLPqzO

Thanks, as always, to everyone's help.
...