javascript - d3js 中数据跳跃是如何发生的

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

您现在正在将数据绑定(bind)到正文，我认为它应该绑定(bind)到栏 div，例如:

d3.select("body").selectAll(".h-bar") 这将为所有具有 .h-bar 类的元素生成一个选择器body 标记的选择器。

另外，因为how selections work在 d3 中你可以简单地做

 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;
    });