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>

有什么建议吗？谢谢！

Answer 1

问题是在这里

.classed(arr[i], true)

i在哪里声明？您需要对每个div进行迭代，才能在div中访问正确的类名。为此，请使用selection.each()

var arr = ["day", "hour", "min", "sec"];
d3.select("#countdown").selectAll("div")
            .data(arr)
            .enter()
            .append("div")
            .each(function(d, i) {
              var div = d3.select(this);
                div.classed(arr[i], true);
            })
            .append("span");

查看工作示例

var arr = ["day", "hour", "min", "sec"];
d3.select("#countdown").selectAll("div")
  .data(arr)
  .enter()
  .append("div")
  .each(function(d, i) {
  var div = d3.select(this);
  div.classed(arr[i], true);
})
  .append("span");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="countdown"></div>

（您将必须使用DevTools中的inspect元素来验证html的格式正确）

Answer 2

我不是真的了解classed的文档，但是您可以改用attr。

以下示例按您的意愿工作：

var arr = ["day", "hour", "min", "sec"]

d3.select("#countdown").selectAll("div")
            .data(arr)
            .enter()
            .append("div")
            .attr("class", (datum, index, nodes) => arr[index]) 
            .append("span")

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="countdown"></div>

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

2 个答案: