d3.js画堆栈图

最新推荐文章于 2022-12-22 00:40:29 发布

weixin_43325967

最新推荐文章于 2022-12-22 00:40:29 发布

阅读量473

点赞数

分类专栏：初学者文章标签： d3.js javascript html css

本文链接：https://blog.csdn.net/weixin_43325967/article/details/105571108

版权

初学者专栏收录该内容

3 篇文章 0 订阅

订阅专栏

d3.js画堆栈图

确定数据




  var data=[
        {
            name:"python",//三种语言的学习人数（假设）
            make:[
                {year:2000,population:5000},
                {year:2001,population:5498},
                {year:2002,population:5348},
                {year:2003, population:5120},
                 {year:2004, population:5502},
                {year:2005, population:5465},
            ]
        },
        {
            name:"java",
            make:[
                {year:2000,population:4659},
                {year:2001,population:5454},
                {year:2002,population:6598},
                {year:2003,population:4989},
                {year:2004,population:5498},
                {year:2005,population:4532},
            ]
        },
        {
            name:"c/c++",
            make:[
                {year:2000,population:6598},
                {year:2001,population:6102},
                {year:2002,population:5498},
                {year:2003,population:4659},
                {year:2004,population:3018},
                {year:2005,population:7502},
            ]
        }
    ];

   定义画布以及边界
   然后制作比例尺：（1）转换数据：

  var xRange = width-padding.left-padding.right;///坐标轴的最大尺寸
    var yRange =height-padding.top-padding.bottom;
    var stack=d3.layout.stack()//转换数据
        .values(function (d) {
            return d.make;
        })
        .x(function (d) {
            return d.year;
        })
        .y(function (d) {
            return d.population;
        });

    var data_stack=stack(data);//使用的数据

   （2）定义比例尺：`

var xscale=d3.scale.ordinal()//这里采用序数比例尺
.domain(data[0].make.map(function (d) {
return d.year;
}))
.rangeBands([0,xRange],0.6);
var y_max=d3.max(data[data_stack.length-1].make,function (d) {//找到最后一个rect的最大y值
return d.y+d.y0;
});

var yscale=d3.scale.linear()
    .domain([0,y_max])
    .range([0,yRange]);//注意是[0,yRange]，不是[yRange,0]，因为每个rect要在上一个rect叠加

`
开始绘画矩形：在这里插入图片描述
添加坐标轴：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .axis path,
        .axis line{
            fill: none;
            stroke: black;
            shape-rendering: crispEdges;

        }
        .axis text {
            font-family: sans-serif;
            font-size: 14px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script>
    var padding={left:80 ,top:50,right:100,bottom:30};
    var width=800,height=700;
    var svg=d3.select("body").append("svg")
        .attr("width",width)
        .attr("height",height);
    var data=[
        {
            name:"python",//三种语言的学习人数（假设）
            make:[
                {year:2000,population:5000},
                {year:2001,population:5498},
                {year:2002,population:5348},
                {year:2003, population:5120},
                 {year:2004, population:5502},
                {year:2005, population:5465},
            ]
        },
        {
            name:"java",
            make:[
                {year:2000,population:4659},
                {year:2001,population:5454},
                {year:2002,population:6598},
                {year:2003,population:4989},
                {year:2004,population:5498},
                {year:2005,population:4532},
            ]
        },
        {
            name:"c/c++",
            make:[
                {year:2000,population:6598},
                {year:2001,population:6102},
                {year:2002,population:5498},
                {year:2003,population:4659},
                {year:2004,population:3018},
                {year:2005,population:7502},
            ]
        }
    ];
    var xRange = width-padding.left-padding.right;///坐标轴的最大尺寸
    var yRange =height-padding.top-padding.bottom;
    var stack=d3.layout.stack()//转换数据
        .values(function (d) {
            return d.make;
        })
        .x(function (d) {
            return d.year;
        })
        .y(function (d) {
            return d.population;
        });

    var data_stack=stack(data);//使用的数据
    var xscale=d3.scale.ordinal()//这里采用序数比例尺
        .domain(data[0].make.map(function (d) {
            return d.year;
        }))
        .rangeBands([0,xRange],0.6);
    var y_max=d3.max(data[data_stack.length-1].make,function (d) {//找到最后一个rect的最大y值
        return d.y+d.y0;
    });

    var yscale=d3.scale.linear()
        .domain([0,y_max])
        .range([0,yRange]);//注意是[0,yRange]，不是[yRange,0]，因为每个rect要在上一个rect叠加


     var color=d3.scale.category10();
     var groups=svg.selectAll("g")//添加分组
         .data(data_stack)
         .enter()
         .append("g")
         .attr("fill",function (d,i) {
             return color(i);
         });
     var rects=groups.selectAll("rect")
         .data(function (d) {
             return d.make;
         })
         .enter()
         .append("rect")
         .attr("x",function (d) {
             return xscale(d.year)+40;
         })
         .attr("y",function (d,i) {
             return yRange-(yscale(d.y0+d.y));
         })
         .attr("width",function (d) {
             return xscale.rangeBand();
         })
         .attr("height",function (d) {
             return yscale(d.y);
         })
         .attr("transform","translate("+padding.left+","+padding.top+")");
     var xAxis=d3.svg.axis()
         .scale(xscale)
         .orient("bottom");
      yscale.range([yRange,0]);//y轴的原点要与x轴原点重合
     var yAxis=d3.svg.axis()//添加坐标轴
         .scale(yscale)
         .orient("left");

     svg.append("g")
         .attr("class","axis")
         .attr("transform",function(d,i) //坐标位置
         {
             return "translate("+(padding.left+40)+","+(height-padding.bottom)+")";
         })
         .call(xAxis)
         .append("text")
         .attr("x",function(d)
         {
             return width-padding.left-padding.right-15;
         })
         .text("year");
    svg.append("g")
        .attr("class","axis")
        .attr("transform",function(d,i) //坐标位置
        {
            return "translate("+(padding.left+40)+","+(height-padding.bottom-yRange)+")";
        })
        .call(yAxis)
        .append("text")
        .attr("x",function(d)
        {
            return 20;
        })
        .text("population");
    groups.append("circle")
        .attr("cx",function () {
            return width-padding.right+10;
        })
        .attr("cy",function (d,i) {
            return 45*(i+1);
        })
        .attr("r",20);
    groups.append("text")
        .attr("x",function (d) {
            return width-padding.right+35;
        })
        .attr("y",function (d,i) {
            return 45*(i+1);
        })
        .text(function (d) {
            return d.name;
        })

</script>
</body>
</html>