D3 条形图未显示数组中的第一个元素

Question

我正在制作第一组 D3 教程（可以在此处找到）找到），并且遇到了数据数组的第一项未出现的问题。我在每个数据 div 元素上放置的边框表明，本质上第一个条目已“折叠”成顶部的一行。有没有解释为什么会发生这种情况？我怎样才能解决这个问题？

我的 HTML、CSS 和 JS 已放到codepen上上可以查看和编辑了。

提前致谢！

孤立的JS：

var data = [10, 23, 14, 5, 6, 6, 6, 22, 17 ]; 

d3.select(".project") 
  .selectAll(".project__bar-chart")
    .data(data) 
  .enter()
  .append("div") 
    .attr("class", "project__bar-chart")
    .style("width", function(d) {return d + "rem";}) 
    .text(function(d) {return d;}) 

Answer 1

你的 HTML 中有这样的内容：

<div class="project">
  <div class="project__bar-chart"></div>
</div>

因此，当你这样做时：

d3.select(".project").selectAll(".project__bar-chart")

您正在选择以前存在<div>于您的selectAll，并且您的“输入”选择将少一个元素。

解决方案：删除带有 class 的 div project__bar-chart：

<div class="project">
    //look Ma, no div
</div>

这是你的笔： https://codepen.io/anon/pen/bgKxXG?editors =1010

这是一个堆栈片段：

<div class="project">
  <div class="project__bar-chart"></div>
</div>

d3.select(".project").selectAll(".project__bar-chart")

<div class="project">
    //look Ma, no div
</div>