我想用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);
});
結果是具有重疊的列的圖表所示波紋管:
我知道(或至少我想我),該問題是,我申請規模的「x」的每個單獨在jsonData像這樣的數據項(而不是整個組):
.attr("x", function(d) {
return x(d.Cadeira);
})
,因此列不能得到均勻地間隔開(在時間,因爲它僅空格1種元素)。它是否正確?
我該如何糾正?
謝謝你的時間。
[解決]
通過正確添加域 「X」 感謝vraiment的回答解決了問題。
x.domain(jsonData.map(function(d){return d.Cadeira;}));
你在哪裏設置域對於x尺度 – jmpyle771
設置域也不起作用。事實上,我的問題有一點小錯誤,因爲所顯示的圖像是通過向x添加域來測試的結果,如下所示:x.domain([0,jsonData.length]); –