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

我正在尝试使用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); 
          }); 

…以下比例：

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

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

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中的每个单独数据项（而不是整个集合），如下所示：

，因此柱的间距不能相等（因为一次只能分隔一个图元）。这是正确的吗

我怎样才能纠正这个问题

谢谢你抽出时间

[已解决]

由于vraiment的回答，通过将域正确添加到“x”解决了问题

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

---

可能您没有初始化xScale域（正确）。 差不多

x、 域（[“A”、“B”、“C”、“D”、“E”]）

---

您在哪里设置x比例的域设置域也不起作用。事实上，我的问题有一点错误，因为所显示的图像是通过将域添加到x的测试得出的，如：x.domain（[0，jsonData.length]）；我尝试使用：x.domain（[0，jsonData.length]）；但结果是，如图所示，基本上，在您的示例中，Cadeirra是x值。根据您的json，Cadeirra包含5个可能的值：A、B、C、D、E。现在，标度的域是可能的输入。在您的例子中，可能的输入是A、B、C、D和E。因此，通过执行[0，jsonData.length]，标尺预期只有2个x值：0和5。但是，我们知道你希望有A，B，C，D，E