Javascript 条形图第1部分D3为什么跳过相同值的数据？

不知道为什么，但我的代码……也非常接近于D3 Bar graph.js教程：

不为变量“dataset”中具有相同值的数据绘制矩形。有人能解释为什么吗？或者如何修复它

var dataset = [5, 2, 1, 1, 1, 50] ;

var w = setWidthToWindow();  //setWidthToWindow
var h = setHeightToWindow();  //setHeightToWindow
var x = d3.scale.linear()
      .domain([0, d3.max(dataset)])
      .range([0, w/2]);

var y = d3.scale.ordinal()
      .domain(dataset)
      .rangeBands([0, 120]);



var chart = d3.select("#over_rating")
          .append("svg")
          .attr("class", "chart")
          .attr("width", w)
          .attr("height", 20 * dataset.length);


chart.selectAll("rect")
     .data(dataset)
    .enter().append("rect")
     .attr("y", y)
     .attr("width", x )
     .attr("height", y.rangeBand());




chart.selectAll("text")
     .data(dataset)
    .enter().append("text")
     .attr("x", w/2 + 15)
     .attr("y", function(d) { return y(d) + y.rangeBand() / 2; })
     .attr("dx", 3) // padding-right
     .attr("dy", ".35em") // vertical-align: middle
     .attr("text-anchor", "end") // text-align: right
     .text(String);

---

您使用的是顺序缩放，并基于数据值而不是索引来定位条形图，因此所有值为“1”的数据缩放到完全相同的位置。如果您查看svg，您将看到在完全相同的位置绘制了三个条形图

我想你可以用索引值来设置刻度：

var y = d3.scale.ordinal()
      .domain(d3.range(dataset.length))
      .rangeBands([0, 120]);

然后按索引进行缩放：

 .attr("y", function(d,i) { return y(i); })

这将允许您添加更多数据，并调整条的宽度以适应它

---

真是宾果游戏！非常感谢您的解释和要求的修复。非常感谢/