首先,如果我的英语很难理解,我会尽力的……
我对 D3.js 相当陌生,我正在尝试使用嵌套数据创建 D3 分组条形图。我查看了此处共享的一些解决方案,但它们仅显示一级分组。就我而言,数据将来自具有以下数据结构的 csv 文件:
groups,categories,value 1,value 2,value 3
group 1,A,61.0158803,25.903359,13.08076071
group 1,B,71.27703826,21.0180133,7.70494844
group 1,C,82.70203982,13.52731445,3.770645737
group 2,A,58.85721523,28.25939061,12.88339417
group 2,B,71.39695487,20.66010982,7.942935308
group 2,C,82.22389321,13.68924542,4.08686137
该图表有两个 x 轴,一个用于组(级别 0),一个用于类别(级别 1)。值 1 到 3 将显示为每个类别的分组条形图,并且类别将显示在相应的区域内。团体。
图表的结构应该是:
value 1 | value 2 | value 3 | value 1 | value 2 | value 3 | value 1 | value 2 | value 3 |
| category A | category B | category C |
| group 1 |
第 2 组也是如此,相邻放置。
问题在于我正在处理的代码,我得到了正确的轴,但在每个组区域中都显示了对应于两个组的数据,一个在另一个之上。我无法将类别上的数据链接到相应的组,或者将它们绘制在相应的位置。
这是我到目前为止得到的代码:
var x0 = d3.scale.ordinal()
.rangeRoundBands([0,width], 0);
var x1 = d3.scale.ordinal()
.rangeRoundBands([0,width]);
var x2 = d3.scale.ordinal();
var y = d3.scale.linear()
.range([height,0]);
var color = d3.scale.category10();
var x0Axis = d3.svg.axis()
.scale(x0)
.orient("bottom");
var x1Axis = d3.svg.axis()
.scale(x1)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select(".chart")
.append("svg")
.attr("class", "svg")
.attr("viewBox", "" + margin* -1 + " " + margin* -1 + " " + (width + margin*2) + " " + (height + margin *2) + "")
.attr ("preserveAspectRatio", "xMidYMid")
.attr("width", "100%")
.attr("height", "100%")
d3.csv("../data/EQ01.csv", function(error, data){
if (error) throw error;
var seriesNames = d3.keys(data[0]).filter(function(key) { return key !== "categories" && key !== "groups";});
data.forEach(function(d) {
d.values = seriesNames.map(function(name) { return {
xValue: name,
yValue: +d[name]
};
});
});
nested = d3.nest()
.key(function(d) { return d.groups})
.key(function(d) { return d.categories})
.entries(data);
y.domain([0, d3.max(data, function(d) { return d3.max(d.values, function(d) { return d.yValue; }); })]);
x0.domain(nested.map(function(d) {return d.key;}));
x1.domain(data.map(function(d) { return d.categories; })).rangeRoundBands([0, x0.rangeBand() ], 0.1);
x2.domain(seriesNames).rangeRoundBands([0, x1.rangeBand()], 0);
svg.append("g")
.attr("class", "x0 axis")
.attr("transform", "translate(0," + (height+30) + ")")
.call(x0Axis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
var group = svg.selectAll(".group")
.data(nested)
.enter().append("g")
.attr("class", "group")
.attr("transform", function(d) { return "translate(" + x0(d.key) + ",0)"; });
group.append("g")
.attr("class", "x1 axis")
.attr("transform", "translate(0," + height + ")")
.call(x1Axis);
var category = group.selectAll(".category")
.data(data)
.enter().append("g")
.attr("class", "category")
.attr("transform", function(d) { return "translate(" + x1(d.categories) + ",0)"; });
category.selectAll("rect")
.data(function(d) { return d.values; })
.enter().append("rect")
.attr("width", x2.rangeBand())
.attr("x", function(d) { return x2(d.xValue); })
.attr("y", function(d) { return y(d.yValue); })
.attr("height", function(d) { return height - y(d.yValue); })
.style("fill", function(d){return color(d.xValue)})
非常感谢您的帮助!