D3.js - 使用rangeBands（）时重叠的条形图

Question

我正在尝试使用JSON数据创建带有D3.js的条形图。似乎大多数教程都使用tsv或csv格式，所以我无法为我的问题找到合适的答案。

问题：我无法使用d3函数rangeBands（...）在图表区域内均匀显示列间距。相反，它们看起来堆叠在一起。

我有以下数据集：

var jsonData = [
    {"Aluno":"Daniel","Presencas":1,"Media":5,"Cadeira":"A"},
    {"Aluno":"Daniel","Presencas":2,"Media":4,"Cadeira":"B"},
    {"Aluno":"Daniel","Presencas":3,"Media":3,"Cadeira":"C"},
    {"Aluno":"Daniel","Presencas":4,"Media":2,"Cadeira":"D"},
    {"Aluno":"Daniel","Presencas":5,"Media":1,"Cadeira":"E"},
];

...以下比例：

var x = d3.scale.ordinal().rangeRoundBands([0, width], .1);

var y0 = d3.scale.linear().domain([0, 20]).range([height, 0]),
y1 = d3.scale.linear().domain([0, 100]).range([height, 0]);

...并按以下方式填充图表：

bars = svg.selectAll(".bar").data(jsonData).enter();
x.domain([0, jsonData.length]);

    bars.append("rect")
      .attr("class", "bar1")
      .attr("x", function(d) { 
          return x(d.Cadeira); 
          })
      .attr("width", x.rangeBand()/2)
      .attr("y", function(d) { 
          return y0(d.Presencas); 
          })
      .attr("height", function(d,i,j) { 
          return height - y0(d.Presencas); 
          }); 

结果是一个重叠列的图表，如下所示：

我意识到（或者至少我认为我这样做）问题是我正在将比例“x”应用于jsonData中的每个单独的数据项（而不是整个集合），如下所示：

.attr("x", function(d) { 
              return x(d.Cadeira); 
              })

，因此列不能均匀分布（因为它一次只能空出1个元素）。这是对的吗？

我该如何纠正？

感谢您的时间。

[解决]

通过正确地将域名添加到“x”来解决问题，这要归功于vraiment的答案。

x.domain(jsonData.map(function(d){return d.Cadeira;}));

Answer 1

也许您没有初始化xScale域（正确）。 像

这样的东西

  

    

x.domain（[ “A”， “B”， “C”， “d”， “E”]）