使用随机数据、比例尺为条形图添加动画效果_第1页
使用随机数据、比例尺为条形图添加动画效果_第2页
使用随机数据、比例尺为条形图添加动画效果_第3页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、使用随机数据、比例尺为条形图添加动画效果摘 要：这一节主要介绍了使用随机数据、比例尺为条形图添加动画的方法。并给出相关代码。关键词：条形图；随机数据；比例尺 1使用随机数据在这里我们要重用一下随机数生成代码。这样就能想更新多少次就更新多少次，而且每次使用的都是新数据集。找到响应单击事件的匿名函数，把其中的静态数据集替换成以下随机生成数据集的代码：var numValues = dataset.length; dataset = ; for (var i = 0; i numValues; i+) var newNumber = Math.floor(Math.random() * 25); d

2、ataset.push(newNumber); 这样就可以用随机生成的包含随机数（024）的数组，替换原来的静态数据集。新数组的长度与原数据集长度相同。然后，更新一下段落的内容Click on this text to update the chart with new data values as manytimes as you like!应该能看到如图所示的结果图1刚开始的图表每次单击上面的段落，代码都会做如下这些事： 生成新随机数； 把新值绑定到已有元素； 把元素过渡到与新值对应的新位置、新高度、新颜色图2使用随机数据生成的图表每次都不同2更新比例尺仔细观察下，可能会对前面的一行代码提

3、出质疑var newNumber = Math.floor(Math.random() * 25);为什么是25？我们这里使用了一个固定值。实际上，这里用maxValue 代替25 可能更有意义：var newNumber = Math.floor(Math.random() * maxValue);因为在这里，我们知道这里生成的newNumber 最大不能超过25。原来之所以选定25，是因为更大的值超出了图表比例尺的输出范围，会导致条形被切掉。图3选用更大的值，导致条形被切掉应该与数据集同步更新比例尺。每次插入新数据，都应该校准一下比例尺，确保生成的条形图不会过高或过低。更新比例尺简单。还记得下面创建yScale 的代码吗：.domain(0, d3.max(dataset).range(0, h);范围不变，只要在生成新数据集之后更新比例尺的值域就好了：yScale.domain(0, d3.max(dataset);这样就把输入值域的最大值设置成了数据集中最大的数值。现在我们把这个变量现在被设置为100。此时单击段落更新数据，就能得到0100 之间的随机数。而且，如果数据集中最大的值是100，那yScale 的值域也会扩展到100，如图9所示。图4 y轴比例能够自动适

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论