D3.js之折线图动画

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

折线图的代码基本上是别人的(本人也是正在学习的)，自己只是在这上面基础上添加动画和一些文字和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>

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

D3.js之折线图动画相关推荐

d3.js折线图_学习使用D3.js创建折线图
d3.js折线图 by Sohaib Nehal 通过Sohaib Nehal 学习使用D3.js创建折线图 (Learn to create a line chart using D3.js) 使用 ...
d3.js 刷新折线图（包括坐标轴及路径的刷新及信息点提示）
接上篇的的刷新折线图的样例,增加了信息点的显示以及坐标轴的更新.坐标轴的时间更新的应用可用于做历史曲线等曲线图.在这里碰到的问题是在mircrosoft Edge下运行完美.但是在chrome下出现 ...
d3js绘制y坐标轴_使用D3.js 绘制折线图
在一个网站上绘制折线图使用了ant/g2,打包后的体积到了一兆多,这不行了,需要按需加载.但是它的支持不太友好,我尝试在官网上用它的方法来按需引入,不是缺这就是缺那,很不好用. 反正我这里只是画个折线 ...
d3.js一个面积图的案例(包含brush与zoom)
d3.js 一个面积图的案例(包含brush与zoom) 参考链接:http://www.a4z.cn/pui/ant-admin.html#/simple-area-chart const rawD ...
D3.js 力导向图的显示优化
D3.js 作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts.Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部 ...
使用d3.v5实现折线图与面积图
d3最新是V5版的,比起V2的API变动了不少,写下我实现过程效果图: 面积图: 折线图: 目录结构: <!DOCTYPE html> <html lang="en&qu ...
D3基本图表绘制——折线图
制作折线图分成4步走: 1.首先划定制图区域和范围--画一个边框 2.数据处理得到绘制折线图需要的数据--绘制折线需要一个数组整体 3.画出x,y轴和折线--y轴绘制需要注意 4.补充标签,调节位置 ...
D3.js 力导向图来处理拓扑图
记录一点碰到的问题和解决方案.感觉国内关于D3.js 4.0版本的相关资料还是少. 力导向图布局 D3一种布局的方式,可以将你nodes links的节点数据转换成可以绘制的坐标点数据,然后通过svg ...
chart.js ajax 折线图,如何在ChartJs 的折线图中显示数据值或索引标签
如何在Chartjs的折线图中显示数据值或索引值,如图所示: 图例.PNG 简介 Chart.js是一款不依赖任何外部js库的图标插件,具体的使用方法可查看Chart.js官网. 需求 Chart.j ...

D3.js之折线图动画

D3.js之折线图动画相关推荐

最新文章

热门文章