# d3栈布局


栈布局很简单,就像栈的形式一样,将数据叠加起来显示。

<script type="text/javascript">
        var w = 500;
        var h = 300;

            //Original data
//数据的格式必须整理成这样
        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);
        var xScale=d3.scale.ordinal()
                            .domain(d3.range(dataset[0].length))
                            .rangeRoundBands([0,w],0.05)
        var yScale=d3.scale.linear()
                            .domain([0,d3.max(dataset,function(d){
                                return d3.max(d,function(d){
                                    return d.y0+d.y;
                                })
                            })])
                            .range([0,h]);
        var colors=d3.scale.category10();

        var svg=d3.select("body")
                    .append("svg")
                    .attr("width",w)
                    .attr("height",h)
        var groups=svg.selectAll("g")
                        .data(dataset)
                        .enter()
                        .append("g")
                        .style("fill",function(d,i){
                            return colors(i);
                        })
        var rects=groups.selectAll("rect")
                    .data(function(d){
                        return d;
                    })
                    .enter()
                    .append("rect")
                    .attr("x",function(d,i){
                        return xScale(i);
                    })
                    .attr("y",function(d){
                        return yScale(d.y0);
                    })
                    .attr("height",function(d,i){
                        return yScale(d.y);
                    })
                    .attr("width",xScale.rangeBand())


</script>

1132044-20170920121110759-1782823769.png

每个rect的坐标为(x,y0),高度为y 从图片中我们可以看到d的数据组成。

转载于:https://www.cnblogs.com/caojunjie/p/7560759.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值