html - 如何更改 D3 中的 CSS "animation-delay"属性？

Question

元素:创建径向进度条以在特定时间启动；即时间启动的进度条。看起来就像径向进度条在互相追逐。

我正在尝试使用 D3 更改 CSS 属性“animation-delay”。我的代码似乎无效。哪些更改会使 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