D3.js - rangeBands()를 사용할 때 겹침 막대 차트

Question

JSON 데이터를 사용하여 D3.js로 막 대형 차트를 만들려고합니다. 대부분의 자습서는 tsv 또는 csv 형식을 사용하므로 내 문제에 대해 적절한 답을 찾을 수 없었습니다.

문제 : d3 function 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); 
       }) 

, 및 따라서 열이 고르게 (a 당시에 때문에 공백 만 1 개 요소) 이격 캔트. 이 올바른지?

어떻게 해결할 수 있습니까?

감사합니다.

[해결]

가 제대로 vraiment의 대답에 "X"덕분에 도메인을 추가하여 문제를 해결.

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

Answer 1

아마 xScale 도메인을 초기화하지 않았습니까?

x.domain ([ "A", "B", "C", "D", "E"])