java d3.js_[Java教程]D3.js学习（七）

最新推荐文章于 2023-02-27 11:38:15 发布

ku drei

最新推荐文章于 2023-02-27 11:38:15 发布

阅读量162

点赞数

文章标签： java d3.js

本文链接：https://blog.csdn.net/weixin_42127775/article/details/114514643

版权

此篇博客介绍了如何使用D3.js在JavaScript中实现图表数据的动态更新和动画效果，通过按钮触发updateData函数，演示了如何在图表中进行数据过渡和坐标轴动画。内容包括从数据文件读取，数据范围调整，以及使用transition方法创建平滑的动画过程。

摘要由CSDN通过智能技术生成

[Java教程]D3.js学习(七)

0 2013-10-21 15:00:10

上一节中我们学会了如何旋转x轴标签以及自定义标签内容，在这一节中，我们将接触动画(transition)

首先，我们要在页面上添加一个按钮，当我们点击这个按钮时，调用我们的动画。所以，我们还需要在原来的基础上添加两个东西。

添加一个按钮

添加一个动画函数function updateData() {//再次获取数据d3.tsv("../data/data-alt.tsv", function(error, data){data.forEach(function(d){d.date = parseDate(d.date);d.close = +d.close;});//设置数据的规模x.domain(d3.extent(data, function(d){ return d.date }));y.domain([0, d3.max(data, function(d){ return d.close })]);//选择我们想要应用变化的部分var svg = d3.select("body").transition();//变化svg.select(".line").duration(750).attr("d", valueline(data));svg.select(".x.axis").duration(750).call(xAxis);svg.select(".y.axis").duration(750).call(yAxis);});}

在上面的代码中，我们首先要获取一个组先的数据，所以，我们从新的数据文件(data-alt.tsv)中读取新的数据。然后，仿造前面绘制图表的方法来进行绘制，不同的是，这里加入一个新的方法-transition()。

transiton(int):使图表从一个状态过渡到另一个状态。括号里面可以是一个整数，表示动画执行的时长，当然也可以是一个ease(type[, arguments…])方法，来表示丰富的运动。

下节我们将把图表中的曲线图变成散点图，以及添加提示框(Tooltips)效果。

本文网址：http://www.shaoqun.com/a/73218.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。