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 = [ [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

在这里，数据起着重要的作用。 您需要修改与图表类型兼容的数据。

这是您的问题的解决方案。

希望，这一定会对您有所帮助。 谢谢 ：）

 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> 

是！！ 理想情况下，堆叠的条形图必须要求二维数组

以下是一些可以使您理解的方案

方案1-

我们需要可视化MAC（仅一种产品）五年的销售情况

那么数据将是：sales：[$ 2000，$ 5555，$ 20177，$ 9999，$ 80805]

所以在这里我们需要简单的条形图，其中每个条形图将显示相应年份的销售额

senario 2-

我们需要可视化5年的3种产品（MAC，iPad，iPhone）的销售情况，那么数据将是：

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

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

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

在这里，我们需要堆叠式聊天，其中每个堆叠将显示相应年份的3种产品的销售额

如果我们有多个数组，那么..除了上面的代码，我们还需要x标度

你可以按照例子

希望这会有所帮助:)谢谢:)