stack布局的用法還是跟其他一樣，我們要知道用stack（dataset）生成的數(shù)據(jù)形式是什么，然后用生成的數(shù)據(jù)去生成我們需要的svg圖形，

var dataset = [{ name: "PC" , sales: [ { year:2005, profit: 3000 },{ year:2006, profit: 1300 },{ year:2007, profit: 3700 },{ year:2008, profit: 4900 },{ year:2009, profit: 700 }] },{ name: "SmartPhone" , sales: [ { year:2005, profit: 2000 },{ year:2006, profit: 4000 },{ year:2007, profit: 1810 },{ year:2008, profit: 6540 },{ year:2009, profit: 2820 }] },{ name: "Software" , sales: [ { year:2005, profit: 1100 },{ year:2006, profit: 1700 },{ year:2007, profit: 1680 },{ year:2008, profit: 4000 },{ year:2009, profit: 4900 }] }];var width=500,height=500,padding=50;var svg=d3.select("body").append("svg").attr("width",width).attr("height",height);var stack=d3.layout.stack().values(function(d){return d.sales}).x(function(d){return d.year}).y(function(d){return d.profit});var data=stack(dataset);

在控制臺可以看到，一級子元素，name，salse，在sales下有二級子元素，year，Profit，y0，y，有四組這樣的數(shù)組，y0是y的坐標(biāo)，y是高度，生成圖形的過程是這樣的，先循環(huán)第一組數(shù)據(jù)，然后生成最下邊一層棧，每一年的pc先畫出來，然后再層層疊加起來，并不是一條柱子一條柱子畫出來的。

2.生成坐標(biāo)軸

/*生成x軸*/var xscale=d3.scale.ordinal().domain(data[0].sales.map(function(d){return d.year})).rangeRoundBands([padding,width-padding],0.2)var xaxis=d3.svg.axis().scale(xscale).orient("buttom")svg.append("g").attr("class","axis").attr("transform","translate("+padding+","+(height-padding)+")").call(xaxis);/*生成y軸*/var ymax=d3.max(data[data.length-1].sales,function(d){return d.y0+d.y});var yscale=d3.scale.linear().domain([0,ymax]).range([height-padding,padding])var yaxis=d3.svg.axis().scale(yscale).orient("left")svg.append("g").attr("class","axis").attr("transform","translate("+padding+",0)").call(yaxis);

上邊生成坐標(biāo)軸的過程也很簡單，比如x軸，映射年份，就需要將年份最小最大找出來，我們?nèi)tack（dataset）生成的數(shù)據(jù)中逐步提取就好了，y軸也是，這里要注意一下，因為svg是從左上角開始，所以，有兩種方式選擇，好理解的是映射為[0,height],另一種是y軸在映射的時候可以映射為[height,0]反一下，那么在生成rect時，height參數(shù)需要變一下，見代碼。

3.生成棧矩形

var color=d3.scale.category10();var groups=svg.selectAll("g .rect").data(data).enter().append("g").attr("class","rect").attr("fill",function(d,i){return color(i)});groups.selectAll("rect").data(function(d){return d.sales;}).enter().append("rect").attr("x",function(d){return xscale(d.year);}).attr("y",function(d){return yscale(d.y0+d.y);}).attr("width",function(d){return xscale.rangeBand();}).attr("height",function(d){return height-yscale(d.y); //與映射為[height,0]是成對出現(xiàn)的。}).attr("transform","translate("+padding+","+(-padding)+")");var labHeight = 50;var labRadius = 10;//生成圓形lablevar labelCircle = groups.append("circle").attr("cx",function(d){ return width - padding*0.98; }).attr("cy",function(d,i){ return padding + labHeight * i; }).attr("r",labRadius);var labelText = groups.append("text").attr("x",function(d){ return width - padding*0.8; }).attr("y",function(d,i){ return padding + labHeight * i; }).attr("dy",labRadius/2).text(function(d){ return d.name; });

轉(zhuǎn)載于:https://www.cnblogs.com/caojunjie/p/8318880.html

總結(jié)

以上是生活随笔為你收集整理的stack布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。