我在 D3 中制作了一个条形图，该系列总共有 18 个条形图，我试图展示所有条形图如何聚集成低、中和高的范围（每个范围中有六个条形）。我希望这些集群中的每一个之间存在视觉差距（因此它们显然是不同的） - 问题是可以根据图表中未显示的其他数据来使用这些条形（考虑人口统计数据以查看条形以不同的方式聚集）。
这是我制作和排序条形的代码
svg.selectAll("rect.bars")
.data(dataset)
.enter()
.append("rect")
.attr("class", "bars")
.attr("x", 0 + padding)
.attr("y", function(d, i){
return yScale(i);
})
.attr("width", function(d) {
return xScale(d.values[0]);
})
.attr("height", yScale.rangeBand())
d3.select("#yield")
.on("click", function(){
svg.selectAll("rect.bars")
.sort(function(a, b){
return d3.ascending(a.values[0], b.values[0])
})
.transition()
.delay(function(d, i){
return i *50;
})
.duration(1000)
.attr("y", function(d, i) {
return yScale(i)
});
});
d3.select("#richPatch")
.on("click", function(){
svg.selectAll("rect.bars")
.sort(function(a, b){
return d3.ascending(a.values[1], b.values[1])
})
.transition()
.delay(function(d, i){
return i *50;
})
.duration(1000)
.attr("y", function(d, i) {
return yScale(i)
});
});
d3.select("#patchMoves")
.on("click", function(){
svg.selectAll("rect.bars")
.sort(function(a, b){
return d3.ascending(a.values[2], b.values[2])
})
.transition()
.delay(function(d, i){
return i *50;
})
.duration(1000)
.attr("y", function(d, i) {
return yScale(i)
});
});
最终我试图让它看起来像这样（但水平布局）
