如何更改D3中的CSS“动画延迟”属性？

Question

项目：要创建径向进度条以启动在特定的时间;即时间启动的进度条。外观会像径向进度条互相追逐。

我试图改变CSS属性“动画延迟”使用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