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

Question

不知道为什么，但我的代码...这也非常密切地遵循此处找到的 D3 Bar graph .js 教程:http://mbostock.github.com/d3/tutorial/bar-1.html

不为变量“数据集”中具有相同值的数据绘制矩形。谁能解释为什么？或者如何解决？

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

Answer 1

您使用序数比例并根据数据值(而不是索引)定位条形，因此所有值为“1”的数据都会缩放到完全相同的位置。如果您查看 svg，您会发现在完全相同的位置绘制了三个条形。

我想你可以用索引值设置比例:

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

然后按索引缩放:

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

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

http://jsfiddle.net/findango/nfdST/