D3条形图到堆积条形图

Question

Hi i'm new to D3 and I'm trying to convert a normal bar chart to a stacked bar chart.

This is my code

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

Any help or hint in to the right direction would be much appreciated.

Answer 1

just for the comment on above answer..

here is the code -

 var data = [ [4, 8, 15, 16, 23, 42, 200], [50, 60, 20, 100, 30, 50, 40] ]; //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 dx; })); y.domain([0, d3.max(stacked[stacked.length - 1], function(d) { return d.y0 + dy; })]); // 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(dx); }) .attr("y", function(d) { return -y(d.y0) - y(dy); }) .attr("height", function(d) { return y(dy); }) .attr("width", x.rangeBand()); 

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

Answer 2

Here data plays an important role. You need to modify the data, compatible with the chart type.

Here is the solution for your problem.

hope, this will surely help you. thanks :)

 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) { return color(i); }) .attr("width", barWidth) .attr('x', 0) .attr("y", function(d) { return y(d[0].y0+d[0].y); }) .attr("height", function(d) { 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> 

yes!! ideally stacked bar chart must require a 2D array

following are few scenarios that will makes your understanding clear

scenario 1 -

we need to visualise sales of MAC(only one product) for 5 years

then the data will be : sales: [$2000, $5555, $20177, $9999, $80805]

so here we need simple bar chart, where each bar will show the sales in respective year

senario 2 -

we need to visualise sales of 3 products(MAC, iPad, iPhone) for 5 years then the data will be :

sales of MAC: [$2000, $5555, $20177, $9999, $80805]

sales of iPad: [$2000, $5555, $20177, $9999, $80805]

sales of iPhone: [$2000, $5555, $20177, $9999, $80805]

here we need stacked bar chat, where each stack will show the sales of 3 products in respective year

if we have multiple array then.. in addition to above code we need, x scale

you can follow the exapmle

hope this will help :) thank you :)