0

不知道为什么，但我的代码......这也非常紧跟 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);
4

1 回答 1

2

您正在使用序数比例并根据数据值而不是索引定位条形，因此所有值为 '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/

于 2013-03-01T01:12:31.257 回答