首页 > 代码库 > 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>