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]
];

你的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个条）。你可以做两件事来实现这个目标：

更改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]]，您有两组叠加的条形图：https://jsfiddle.net/gerardofurtado/f8j4jm5n/

D3渲染叠加的条形图

1 个答案: