Angular + d3: анимация svg порождает ужасную CD

Итак, у меня есть компонент, содержащий немного d3. Это не очень сложно. Но SVG должен быть в постоянном переходе. Для того чтобы это произошло. Когда функция, выполняющая переход, запускается, она устанавливает тайм-аут для повторного вызова себя через несколько секунд.

Когда этот код работает, вентилятор на моем компьютере сразу включается, и процессор переходит на 40 % +/-. Если я просто соберу svg, а затем не буду запускать анимацию в асинхронном цикле, то загрузка процессора составит всего несколько процентов. Как я и ожидал. Когда я приостанавливаю выполнение JS в DevTools, стек вызовов указывает на цикл CD.

Мой вопрос: как мне получить анимацию d3, чтобы не заставлять обнаружение изменений Angular работать таким сумасшедшим?

Вот код, который выполняется. Он находится внутри одного из моих классов:

const animate = () => {
    // this points to a piece of the SVG in my template
    gradient
        .transition()
        .duration(6001)
        .ease(d3.easeSin)
        .attr('r', 0.65)
        .transition()
        .duration(6001)
        .ease(d3.easeSin)
        .attr('r', 0.35);    this.zone.runOutsideAngular(() => {
        this.timeout = setTimeout(() => {
            this.zone.runOutsideAngular(animate);
        }, 12003);
    });
};this.zone.runOutsideAngular(animate);

Вот что я пробовал до сих пор:

• Как видите, я попытался обернуть его с вызовами runOutsideAngular. Не помогло
  • Я изменил ChangeDetectionStrategy моего компонента на OnPush. Не помогло
  • Я добавил импорт d3 перед импортом zone.js, надеясь, что все функции d3 запустятся до того, как зоны будут настройка и запуск. Не помогло

Я просто хочу, чтобы эта анимация работала вне Angular. Вот пример компонента. Если вы откроете его, обратите внимание, что загрузка процессора на этой вкладке в вашем браузере увеличится до 30%, 40%, 50%? https://plnkr.co/edit/VQAuQzA2JzKNoArmgbfn?p=preview