D3條形圖堆積條形圖

Question

嗨，我是D3新手，我試圖將普通條形圖轉換爲堆積條形圖。

這是我的代碼

var data = [4, 8, 15, 16, 23, 42, 200]; 

var height = 200; 
var width = 200; 
var barWidth = 35; 
var barOffset = 5; 

var myChart = d3.select(".chart").append('svg') 
.attr('width', width) 
.attr('height', height) 
.style("background", "grey") 
.selectAll('rect') 
.data(data) 
.enter().append('rect'). 
style("fill", "blue") 
.attr("width", barWidth) 
.attr("height", function(d){ return d;}) 
.attr('x', function(d, i) 
     { return i *(barWidth + barOffset);}) 
.attr('y', function(d){ 
    return height - d; 
}); 

任何幫助或提示在正確的方向，將不勝感激。

Answer 1

只是爲了評論以上答案。

這裏是代碼 -

var data = [ 
 
\t [4, 8, 15, 16, 23, 42, 200], 
 
\t [50, 60, 20, 100, 30, 50, 40] 
 
\t ]; 
 
//console.log(data) 
 

 
//console.log("REMAP---------------------------"); 
 
var remapped =data[0].map(function(dat,i){ 
 
    return data.map(function(d,ii){ 
 
     return {x: ii, y: d[i] }; 
 
    }) 
 
}); 
 

 

 
var w = 200, 
 
h = 200 
 

 
// create canvas 
 
var svg = d3.select(".chart").append("svg:svg") 
 
.attr("width", w) 
 
.attr("height", h) 
 
.append("svg:g") 
 
.attr("transform", "translate(0,"+h+")"); 
 

 
var x = d3.scale.ordinal().rangeRoundBands([0, w], 0.5) 
 
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;})); 
 

 

 

 
//console.log("LAYOUT---------------------------"); 
 
var stacked = d3.layout.stack()(remapped) 
 
//console.log(stacked) 
 

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

 
// show the domains of the scales    
 
console.log("x.domain(): " + x.domain()) 
 
console.log("y.domain(): " + y.domain()) 
 

 

 
// Add a group for each column. 
 
var valgroup = svg.selectAll("g.valgroup") 
 
.data(stacked) 
 
.enter().append("svg:g") 
 
.attr("class", "valgroup") 
 
.style("fill", function(d, i) { return color(i); }) 
 
.style("stroke", function(d, i) { return d3.rgb(color(i)).darker(); }); 
 

 
// Add a rect for each date. 
 
var rect = valgroup.selectAll("rect") 
 
.data(function(d){return d;}) 
 
.enter().append("svg:rect") 
 
.attr("x", function(d) { return x(d.x); }) 
 
.attr("y", function(d) { return -y(d.y0) - y(d.y); }) 
 
.attr("height", function(d) { return y(d.y); }) 
 
.attr("width", x.rangeBand());

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 

 
<div class="chart"></div> 
 
\t \t

Answer 2

這裏的數據起着重要的作用。 您需要修改與圖表類型兼容的數據。

這是您的問題的解決方案。

希望，這一定會幫助你。謝謝:)

var data = [4, 8, 15, 16, 23, 42, 200]; 
 

 
data = data.map(function(d) { return [{x: 0, y: d}] }); 
 

 
var stack = d3.layout.stack(); 
 
var stackData = stack(data); 
 
var color = d3.scale.ordinal() 
 
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]).domain(data.map(function(d,i){return i;})); 
 

 
var height = 200; 
 
var width = 200; 
 
var barWidth = 35; 
 
var barOffset = 5; 
 

 
var lastData = stackData[stackData.length-1][0]; //to get the max value 
 
var y = d3.scale.linear() 
 
    .rangeRound([height, 0]).domain([0, lastData.y+lastData.y0]); 
 

 
var myChart = d3.select(".chart").append('svg') 
 
.attr('width', width) 
 
.attr('height', height) 
 
.style("fill", "grey") 
 
.selectAll('rect') 
 
.data(stack(data)) 
 
.enter().append('rect'). 
 
style("fill", function(d,i) { 
 
\t return color(i); 
 
}) 
 
.attr("width", barWidth) 
 
.attr('x', 0) 
 
.attr("y", function(d) { 
 
\t return y(d[0].y0+d[0].y); 
 
}) 
 
.attr("height", function(d) { 
 
\t return height - y(d[0].y); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div class="chart"></div>

是！理想的疊置條形圖必須要求2D陣列

以下是幾個方案是將讓你瞭解清楚

場景1 -

我們需要可視化銷售MAC（只有一個產品） 5年

那麼數據將是：銷售：[$ 2000 $ 5555，$ 20177，$ 9999 $ 80805]

所以在這裏我們需要簡單的柱狀圖，其中每個欄將顯示在相應的年度銷售

塞納里奧2 -

我們需要可視化銷售的3個款產品（MAC，的iPad，iPhone）5年 則數據將是：

銷售MAC的：[$ 2000 $ 5555，$ 20177，$ 9999 $ 80805]

銷售的iPad：[$ 2000 $ 5555，$ 20177，$ 9999 $ 80805]

個

銷售iPhone的：[$ 2000 $ 5555，$ 20177，$ 9999 $ 80805]

這裏我們需要堆疊酒吧聊天，其中每個堆棧將顯示3種產品的銷售在各年

如果我們有多個陣列的話..除了上面的代碼中，我們所需要的，X比例

你可以按照exapmle

希望這將幫助:)謝謝:)