Как изменить свойство CSS "animation-delay" в D3?

Question

Проект: создание радиальных индикаторов выполнения для запуска в определенное время;т.е. индикаторы времени, инициируемые временемВнешний вид будет выглядеть так, будто радиальные индикаторы прогресса преследуют друг друга.

Я пытаюсь изменить свойство CSS «animation-delay» с помощью D3.Мой код кажется неэффективным.Какие изменения приведут к тому, что код D3 изменит свойство CSS?

Вот фрагмент кода D3:

<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
//Assume we have a function that calculates the amount of time lapsed since the last departure
//function seconds_since_depart {(return time=(now.time - last.depart.time))}

var time=42;
// a negated time is equal to a progress bar being initiated 42 seconds ago
//but the following line doesn't work
d3.selectAll(".progress__value__a").style({"animationDelay": "-" + time + "s"})

</script>

https://jsfiddle.net/vwetzkjy/

Спасибо

Answer 1

Это решение не использует d3, но, поскольку у вас нет данных для управления вашим документом, я не уверен, что вам действительно нужно использовать d3 для достижения этого.

var time = 10;
const selector = `.progress__value__a`
const progressBar = document.querySelector(selector)
progressBar.style.animationDelay = `${time*-1}s`

body {
  background-color: #f9faff;
  overflow: hidden;
}

.demo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}


.progress {
  transform: rotate(-90deg);
}

.progress__value {
  stroke-dasharray: 766.5486;
  stroke-dashoffset: 0;
  animation: progress 39.86s linear infinite;
}

.progress__value__a {
  stroke-dasharray: 766.5486;
  stroke-dashoffset: 0;
  animation: progress 39.86s linear infinite;
}


@keyframes progress {
  0% {
    stroke-dasharray: 0 766.5486;
  }
}

<div class="demo">
  <svg class="progress" height="500" width="500">
    <circle cx="260" cy="230" r="122" stroke="#e6e6e6" stroke-width="4" fill="white" />
    <circle class="progress__value" cx="260" cy="230" r="122" stroke="#009900" stroke-width="5" opacity=".71" fill="#f9faff" stroke-dasharray="766.5486" stroke-dashoffset="766.5486" />
    <circle class="progress__value__a" cx="260" cy="230" r="122" stroke="#ff3a00" stroke-width="5" opacity=".71" fill="#f9faff" stroke-dasharray="766.5486" stroke-dashoffset="766.5486" />
  </svg>
</div>

jsfiddle