Question

输出中缺少数据中的最后一项“8”：

var data = [10, 15, 30, 50, 80, 65, 55, 30, 20, 10, 8];
 function render(data){

 d3.select("body")
   .data(data)
   .enter()
   .append("div")
   .attr("class", "h-bar")
   .append("span");

d3.selectAll("span")
  .data(data)
  .append("text")
  .text(function(d){
   return d;
  });
d3.selectAll("div")
  .data(data)
  .style("width", function(d){
    return d*5+ "px";
  });

 }

 render (data);

这里是jsfiddle：http://jsfiddle.net/devprashant/E3aNd/

Answer 1

你现在正在将数据绑定到正文我认为应该绑定到像div这样的条形码：

d3.select("body").selectAll(".h-bar")这会为包含.h-bar类的所有元素生成一个选择器，而不是body标记的选择器。

另外，由于d3中的how selections work，您只需执行

即可

 d3.select("body").selectAll(".h-bar")
   .data(data)
   .enter()
 .append("div")
   .attr("class", "h-bar")
   .style("width", function(d){
     return d*5+ "px";
    })
 .append("span")
    .text(function(d){
      return d;
    });

Answer 2

您不应重复数据方法，只需要一次调用：

d3.selectAll("span")
// .data(data)
 .append("text")
 .text(function(d){
  return d;
 });
d3.selectAll("div")
 //.data(data)
 .style("width", function(d){
   return d*5+ "px";
 });

我对你的小提琴进行了更新：http://jsfiddle.net/E3aNd/1/

Answer 3

   d3.select("body")
     .selectAll("div") // <-- bind data to divs, not to body
     .data(data)
     .enter()
     .append("div")
     .attr("class", "h-bar")
     .append("span");

在第一次绑定中调用.data（数据）之前，你缺少.selectAll（＆＃34; div＆＃34;）。第一次调用数据需要绑定到body，而不是选择div，这些div最初都是空的。

回答你的问题：

您的代码不包括初始传递中的第一个项。然后在随后的数据通话中，它不包括最后一项，因为它是一个div短路。添加文本元素以显示初始传递的值 - http://jsfiddle.net/E3aNd/6/

后，很容易看到

如何在d3js中发生数据跳过

3 个答案: