KJBU2

今天做了一个小时钟动画，因为学习canvas也做过一个时钟，所以想着可不可以使用d3来做个时钟动画。主要利用的还是饼图这个布局，添加了一个圆形颜色渐变的效果。 时钟 var width = 500, height = 500; var svg = d3.select('body').append("svg").attr("wid

上篇只是说了饼图的从无到有的旋转动画，这次来说说怎么给饼图添加外接注释加连线，以及数据更新的动画。虽然d3.js写的麻烦，我看了几天echart，发现只要套套模板更改一下参数就行，但是d3可塑性很高，完全由你想象，想怎么画就怎么画。 头疼 button{ position: absolute; margin: 10

参考博客有什么不知道的API可以参考D3中文API也可以去查看别人写的普通柱状图柱状图详解之前学习d3的时候就看到柱状图中有那种几组几组在一起，今天看到一个demo就是这种几组一起的。就去仔细看了那个Demo,并且写下这篇文章。这是V3版本思路：平时写的写的柱状图都是一个一个，那么怎么将一个柱状图中一个分成好几个呢。大概的思路就是这样的，其实他写了四个柱状图来将他拼凑在

原文链接最近看到D3的demo库中有一个例子，他是从无到有旋转开来。他这个动画效果的。效果如下：在来看看我之前写的效果：对比一下就很容易看出来两个饼图旋转开来的区别了：第一个是所有的弧都开始从无到有变化第二个：是一个弧选旋转完成在到到下一弧开始旋转(具体实现看之前写的教程)本篇主要来说说第一个的实现。其实也没什么好说的，就是设置所

学习D3差不多一个月了。最近看了刚看了echart，发现他里面的饼图初始化的时候是从无到有的打开一圈。所以想要模仿这个动画效果。如果想要学习D3.js饼图布局可以去看这个网站： http://www.ourd3js.com开始的想法是这样的：先给出饼图从无到有展开花费的所有时间，再设计饼图每个弧所占的比例，乘以动画总时间，就每个弧所要执行的时间。在用一个delaytime变量保

灵感来源于一个D3学习群中的一个大神的demo，再加上自己学习D3一个半多月，看了很多Demo,总有一种看了知道是什么意思的，但是要让自己写，就写不出来的赶脚，所以就尝试做个小Demo来练练手。难度不大，主要在于自己把之前学的一些东西串起来。巩固一下自己知识点。主要使用到的就是d3(用于界面的绘制)和html5中audio的使用。下面就让我们一起来看下演示的效果，如下图：

主要实现的效果一个折线图，然后线条可以从头到尾的出现。折线图的代码基本上是别人的(本人也是正在学习的)，自己只是在这上面基础上添加动画和一些文字和circle参考：参考折线图的博客 参考SVG动画博客 .axis path, .axis line{ fill:none; stroke:black;