javascript - D3 渲染堆积条

Question

我试图根据数组中的行数显示条数。目前显示的条数由数组中元素的数量决定。例如，[2,3,4,5]，将显示 4 个堆叠条。但我想要 data = [[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]
];

您的重新映射将是一个包含 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 个条)。您可以做两件事来实现这一目标:

• 更改重新映射变量的创建方式；
• 转置原始矩阵。

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

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

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

在这个 fiddle 中，使用数据[[4, 8, 10], [50, 20, 20]]你有2组堆叠条:https://jsfiddle.net/gerardofurtado/f8j4jm5n/