D3渲染堆叠条

Question

我正在尝试根据数组中的行数来显示条形的数量。目前显示的条数取决于我在数组中有多少元素。例如，[2,3,4,5]，将显示 4 个堆叠的条形图。但我想要数据 = [[4, 8, 10], [50, 20, 20]] 这给了我 2 个堆叠的条形图。

我的代码：

var margin = { top: 30, right: 30, bottom: 40, left: 50}

var data = [[4, 8, 10],
[50, 30, 20]
,[4, 18, 15],
[50, 20, 20]
];  

var remapped = data.map(function(row) {
return row.map(function(col,i){

return { x: i, y: col };
});
});

var w = 200,
h = 200;

var svg = d3.select(".chart").append("svg:svg")
.attr("width", 4000)
.attr("height", 300 )
.append("svg:g")
.attr("transform", "translate(0,"+h+")");

var x = d3.scale.ordinal().rangeRoundBands([0, w], 0.4, 0.03)
var y = d3.scale.linear().range([0, h])
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]).domain(data[0].map(function(d,i){return i;}));

var chartContainer = svg.append('g').attr('class', 'bar-chart-container');

var stacked = d3.layout.stack()(remapped)

x.domain(stacked[0].map(function(d) { return d.x; }));
y.domain([0, d3.max(stacked[stacked.length - 1], function(d) { return d.y0 + d.y; })]);



var group = chartContainer.selectAll("svg")
.data(stacked)
.enter().append("svg:g")
.attr("class", "group")
.style("fill", function(d, i) { return color(i); })

var rect = group.selectAll("rect")
.data(function(d){return d;})
.enter().append("svg:rect")
.attr("x", function(d, i) {; return x(d.x); })
.attr("y", function(d,i) { return -y(d.y0) - y(d.y); })
.attr("height", function(d) { return y(d.y); })
.attr("width", x.rangeBand());

非常感谢您花时间阅读本文。

Answer 1

现在，如果你有这个数组：

var data = [
    [4, 8, 10], 
    [50, 20, 20]
];

您的remapped 将是一个包含 2 个数组（每个数组有 3 个对象）的数组，如下所示：

var remmaped = [
    [{ x: 0, y: 4},
     { x: 1, y: 8},
     { x: 2, y: 10},
    ],
    [{ x: 0, y: 50},
     { x: 1, y: 20},
     { x: 2, y: 20},
    ]
];

这给了您预期的结果：3 组堆叠的条形图，每组有 2 个条形图。

但是，如果我理解正确，您希望 [4, 8, 10] 成为第一组的值，而 [50, 20, 20] 成为第二组的值，即只有 2堆叠的酒吧（每个有 3 个酒吧）。您可以做 2 件不同的事情来实现这一目标：

• 更改remapped 变量的创建方式；
• 转置原始矩阵。

我做了第二个，使用这个函数转置矩阵：

var newData = data[0].map(function(col, i) { 
    return data.map(function(row) { 
        return row[i] 
    })
});

然后我们使用newData 创建remapped，它现在是一个包含 3 个数组的数组，每个数组包含 2 个对象。

在这个小提琴中，使用 [[4, 8, 10], [50, 20, 20]] 作为数据，您有 2 组堆叠条：https://jsfiddle.net/gerardofurtado/f8j4jm5n/