循环遍历数组并使用d3将每个项目分配为html标记中的类

Question

我有一个数组：

var arr = ["day", "hour", "min", "sec"]

在创建了与数组相同的div数之后，我想给class div提供类，其中class将是数组中的每个项。

我的代码是这样的：

d3.select("#countdown").selectAll("div")
            .data(arr)
            .enter()
            .append("div")
            .classed(arr[i], true)
            .append("span")

哪个输出

<div id="countdown">
  <div><div>
  <div><div>
  <div><div>
  <div><div></div>

我被卡住了 在每个div接收类之后，它将包含span标记。

预期的html结果：

<div id="countdown">
  <div class="day"><span></span><div>
  <div class="hour"><span></span><div>
  <div class="min"><span></span><div>
  <div class="sec"><span></span><div></div>

有什么建议？谢谢！