D3レンダリングスタックバー

Question

私は配列の行の量に応じて棒の数を表示しようとしています。現在表示されている棒の数は、配列内の要素の数によって決まります。たとえば、[2,3,4,5]は、4つの積み重なった棒を表示します。しかし、私は2つの積み重なった棒を与えるデータ= [[4、8、10]、 [50、20、20]]が欲しい。

マイコード：これを読む時間を事前に

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つのオブジェクトを持つ各1）、次のようになります。

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]を第1のグループの値にし、[50,20,20]を第2のグループの値にする2枚の積み重ね棒（それぞれ3本の棒で）。これを達成するために2つの異なることができます：

• remapped変数の作成方法の変更。元の行列を転置する。

私はこの機能を使用して行列を転置、第二のいずれかを行った：

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

その後、我々は今、2つのオブジェクトそれぞれに3列を有する配列である、remappedを作成するnewDataを使用します。このフィドルで

は、データとして使用して[[4, 8, 10], [50, 20, 20]]あなたは、積層されたバーの2つのグループがあります。https://jsfiddle.net/gerardofurtado/f8j4jm5n/