D3.js - 使用rangeBands時重疊的條形圖（）

我想用D3.js使用JSON數據創建條形圖。看起來大多數教程使用tsv或csv格式，所以我一直無法爲我的問題找到合適的答案。D3.js - 使用rangeBands時重疊的條形圖（）

問題：我無法使用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); 
      });

結果是具有重疊的列的圖表所示波紋管： enter image description here

我知道（或至少我想我），該問題是，我申請規模的「x」的每個單獨在jsonData像這樣的數據項（而不是整個組）：

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

，因此列不能得到均勻地間隔開（在時間，因爲它僅空格1種元素）。它是否正確？

我該如何糾正？

謝謝你的時間。

[解決]

通過正確添加域「X」感謝vraiment的回答解決了問題。

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

來源

2014-02-19 Daniel André

你在哪裏設置域對於x尺度 – jmpyle771

設置域也不起作用。事實上，我的問題有一點小錯誤，因爲所顯示的圖像是通過向x添加域來測試的結果，如下所示：x.domain（[0，jsonData.length]）; –

也許您未初始化xScale域（正確）。喜歡的東西

x.domain（[ 「A」，「B」，「C」，「d」，「E」]）

來源

2014-02-19 19:14:57 jmpyle771

我試過使用：x.domain（[0，jsonData.length]）;但結果如圖所示 –

基本上，在你的例子中，Cadeirra是x值。根據你的json，凱代拉包含5個可能的值：A，B，C，D，E。現在，一個規模的領域是可能的投入。在你的情況下，可能的輸入是A，B，C，D和E.因此，通過執行[0，jsonData.length]，該比例要求只有2個值：0和5.但是，我們知道你想要那裏有A，B，C，D，E – jmpyle771

多麼愚蠢的錯誤....你是絕對正確的！是的，修復它，謝謝 –

D3.js - 使用rangeBands時重疊的條形圖（）

回答

相關問題