D3.js之折线图动画

最新推荐文章于 2023-07-14 15:17:43 发布

KJBU2

最新推荐文章于 2023-07-14 15:17:43 发布

阅读量8k

点赞数

分类专栏： D3.js

本文链接：https://blog.csdn.net/KJBU2/article/details/53386038

版权

D3.js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

主要实现的效果一个折线图，然后线条可以从头到尾的出现。

折线图的代码基本上是别人的(本人也是正在学习的)，自己只是在这上面基础上添加动画和一些文字和circle

参考：参考折线图的博客参考SVG动画博客

效果图如下：

折线图动画图片

这样的折线动画是不是很有意思，让线慢慢移动着。所用到的知识点也没有太难的。

只是在折线图上使用了两个属性： stroke-dasharray和stroke-dashoffset。

第一个属性设置虚线的间隔长度，让它等于自己本身，就是隐藏本身，在通过第二个属性(线段的偏移量)，

通过不断增加和减少这个属性，使得线段慢慢出来。从而有了动画的效果。

然后就是使用CSS3中animate的动画属性来执行上面的过程。

<!DOCTYPE html >
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
    .axis path,
    .axis line{
        fill:none;
        stroke:black;
        shape-rendering:crispEdges;        /* //设置线条的样式 */
    }
    .line:nth-child(2){
            stroke-dasharray: 397;             /* //设置虚线的间隔长度 */
            stroke-dashoffset: 397;             /* 设置线段偏移长度 */

            animation: dash 40s infinite;
    } /*添加动画的效果，具体想怎么动，可以修改这里面的东西*/
      @keyframes dash {	
            0%{
                 stroke-dashoffset: 397;
                }
                25%{
                    stroke-dashoffset: 0;
                }
                50%{
                     stroke-dashoffset: -397;
                    }75%{
                stroke-dashoffset: 0;
              }
              100%{
                stroke-dashoffset: 397;
              }
        }
    </style>
</head>


<body>
    <script src="../js/d3.js"></script>
    <script >
        var width=500;
    var height=500;

    var dataset=[
    {
        country:"china",
        gdp:[[2000,11920],[2001,13170],[2002,14550],
            [2003,16500],[2004,19440],[2005,22870],
            [2006,27930],[2007,35040],[2008,45470],
            [2009,51050],[2010,59490],[2011,73140],
            [2012,83860],[2013,103550]]
    },
    {
        country:"japan",
        gdp:[[2000,47310],[2001,41590],[2002,39800],
            [2003,43020],[2004,46550],[2005,45710],
            [2006,43560],[2007,43560],[2008,48490],
            [2009,50350],[2010,54950],[2011,59050],
            [2012,59370],[2013,48980]]
    }
];

        var padding={top:70, right:70, bottom: 70, left:70};
        var gdpmax=0;
        //找出两组GDP中的最大值
        for(var i=0;i<dataset.length;i++){
            var currGdp=d3.max(dataset[i].gdp,function(d){
                return d[1];
            });
            if(currGdp>gdpmax)
                gdpmax=currGdp;
        }
        console.log(gdpmax);
        //定义x、y轴的比例尺
        var xScale=d3.scale.linear()
                    .domain([2000,2013])
                    .range([0,width-padding.left-padding.right]);

        var yScale=d3.scale.linear()
                    .domain([0,gdpmax*1.1])
                    .range([height-padding.bottom-padding.top,0]);

        var linePath=d3.svg.line()//创建一个直线生成器
                        .x(function(d){
                            return xScale(d[0]);
                        })
                        .y(function(d){
                            return yScale(d[1]);
                        })
                        .interpolate("basic")//插值模式,让线段变得更加圆滑
                        ;

        //定义两个颜色
        var colors=[d3.rgb(0,0,255),d3.rgb(0,255,0)];

        var svg=d3.select("body")
                        .append("svg")
                        .attr("width",width)
                        .attr("height",height);

        svg.selectAll("path")
            .data(dataset)
            .enter()
            .append("path")
            .attr("transform","translate("+padding.left+","+padding.top+")")
            .attr("class","line")
            .attr("fill","none")
            .attr("stroke-width",3)
            .attr("stroke",function(d,i){
                return colors[i];
            })
             .attr("d",function(d){
                return linePath(d.gdp);
            })
           ;
            

                var dataset1 = [];
                for (var i = 0; i < dataset.length; i++) {
                    for (var j = 0; j < dataset[i].gdp.length; j++) {
                        dataset1.push(dataset[i].gdp[j]);
                    }
                }
                svg.selectAll("circle")
                    .data(dataset1)
                    .enter()
                    .append("circle")
                    .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
                    .style('fill',"white")
                    .style("stroke","black")
                    .style("stroke-width","2px")
                    .attr("cx", function(d, i) {
                        return xScale(d[0]);
                    })
                    .attr("cy", function(d, i) {
                        return yScale(d[1]);
                    })
                    .attr('r', function() {
                        return 3;
                    });
             
            
	
        var xAxis=d3.svg.axis()
                    .scale(xScale)
                    .ticks(5)
                    .tickFormat(d3.format("d"))
                    .orient("bottom");

        var yAxis=d3.svg.axis()
                    .scale(yScale)
                    .orient("left");

        //添加一个g用于放x轴
        svg.append("g")
            .attr("class","axis")
            .attr("transform","translate("+padding.left+","+(height-padding.top)+")")
            .call(xAxis);

        svg.append("g")
            .attr("class","axis")
            .attr("transform","translate("+padding.left+","+padding.top+")")
            .call(yAxis);


         svg.append('g').selectAll('text')
         	.data(dataset)
         	.enter()
         	.append('text')
         	.style('fill',function(d,i){
         		return colors[i];
         	})
         	.style('font-size',"1.3em")
         	.attr('x',function(d,i){
         		return xScale(2013)+10;
         	})
         	.attr("y",function(d,i){
         		console.log(d);	
         		return yScale(d.gdp[13][1]);
         	})
         	.attr('dy','.3em')
         	.text(function(d,i){
         		return d.country;
         	})
         	.attr('transform',"translate("+padding.left+","+padding.top+")")
         	;

         	//在不知道折线的具体长度的时候可以动态添加动画属性。
         	// var path = document.getElementsByClassName('line');  获取class标签为line的元素
         	// var length = path[0].getTotalLength();				//获取第一个折线的总共的长度
         	// d3.select('.line')
         	// .style('stroke-dasharray', length)					//根据上面获取的值来设置stroke-dasharray值
         	// .style('stroke-dashoffset', length);

         	// var rule = "@keyframes dash {0%{stroke-dashoffset:" + length + ";}100%{ stroke-dashoffset: 0;}  }";
         	// var style = document.createElement('style');
         	// style.type = 'text/css';
         	// style.innerHTML = rule;
         	// document.getElementsByTagName('head')[0].appendChild(style);
         	// path[0].style.animation = "dash 10s 1";

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

这样的折线动画是不是很有意思，让线慢慢移动着。