首页 > 代码库 > D3_book 11.2 stack
D3_book 11.2 stack
<!-- book :interactive data visualization for the web 11.2 stack 一个堆叠图的例子 --> <!DOCTYPE html> <meta charset="utf-8"> <style> </style> <body> <script src="../d3.min.js"></script> <script> var dataset = [ [ { x: 0, y: 5 }, { x: 1, y: 4 }, { x: 2, y: 2 }, { x: 3, y: 7 }, { x: 4, y: 23 } ], [ { x: 0, y: 10 }, { x: 1, y: 12 }, { x: 2, y: 19 }, { x: 3, y: 23 }, { x: 4, y: 17 } ], [ { x: 0, y: 22 }, { x: 1, y: 28 }, { x: 2, y: 32 }, { x: 3, y: 35 }, { x: 4, y: 43 } ] ]; var stack=d3.layout.stack(); stack(dataset); //只有经过这一步,dataset才可以转变堆叠图的数据 var color=d3.scale.category10(); var w=500,h=100; var xScale=d3.scale.ordinal() .domain(d3.range(dataset[0].length)) //序数要取[0] .rangeRoundBands([0,w],0.05) ; var yScale=d3.scale.linear() .domain([0, d3.max(dataset,function(d){ return d3.max(d,function(d){ console.log(d.y0); console.log(d.y); return d.y0+d.y; }); }) ]) .range([0,h]) //什么时候为h,0 ; var svg=d3.select(‘body‘) .append(‘svg‘) .attr({ ‘width‘:w, ‘height‘:h }) ; var groups=svg.selectAll(‘g‘) .data(dataset) .enter() .append(‘g‘) .style(‘fill‘,function(d,i){ return color(i); }) ; var rects=groups.selectAll(‘rect‘) .data(function(d){return d;}) .enter() .append(‘rect‘) .attr({ ‘x‘:function(d,i){ return xScale(i); }, ‘y‘:function(d){ return yScale(d.y0); }, // 以x轴底部为基础 // ‘y‘:function(d){ // return h-yScale(d.y+d.y0); // }, ‘width‘:xScale.rangeBand(), ‘height‘:function(d,i){ return yScale(d.y); }, }) ; </script> <!-- 以左y轴为基础 --> <!DOCTYPE html> <meta charset="utf-8"> <style> </style> <body> <script src="../d3.min.js"></script> <script> var dataset = [ [ { x: 0, y: 5 }, { x: 1, y: 4 }, { x: 2, y: 2 }, { x: 3, y: 7 }, { x: 4, y: 23 } ], [ { x: 0, y: 10 }, { x: 1, y: 12 }, { x: 2, y: 19 }, { x: 3, y: 23 }, { x: 4, y: 17 } ], [ { x: 0, y: 22 }, { x: 1, y: 28 }, { x: 2, y: 32 }, { x: 3, y: 35 }, { x: 4, y: 43 } ] ]; var stack=d3.layout.stack(); stack(dataset); //只有经过这一步,dataset才可以转变堆叠图的数据 var color=d3.scale.category10(); var w=100,h=500; var yScale=d3.scale.ordinal() .domain(d3.range(dataset[0].length)) //序数要取[0] .rangeRoundBands([0,h],0.05) ; var xScale=d3.scale.linear() .domain([0, d3.max(dataset,function(d){ return d3.max(d,function(d){ console.log(d.y0); console.log(d.y); return (d.y0+d.y); }); }) ]) .range([0,w]) //什么时候为h,0 ; var svg=d3.select(‘body‘) .append(‘svg‘) .attr({ ‘width‘:w, ‘height‘:h }) ; var groups=svg.selectAll(‘g‘) .data(dataset) .enter() .append(‘g‘) .style(‘fill‘,function(d,i){ return color(i); }) ; var rects=groups.selectAll(‘rect‘) .data(function(d){return d;}) .enter() .append(‘rect‘) .attr({ ‘y‘:function(d,i){ return yScale(i); }, ‘x‘:function(d){ return xScale(d.y0); }, ‘height‘:yScale.rangeBand(), ‘width‘:function(d,i){ return xScale(d.y); }, }) ; </script>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。