![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
D3.js
KJBU2
只求看懂题意
展开
-
D3.js时钟
今天做了一个小时钟动画,因为学习canvas也做过一个时钟,所以想着可不可以使用d3来做个时钟动画。主要利用的还是饼图这个布局,添加了一个圆形颜色渐变的效果。 时钟 var width = 500, height = 500; var svg = d3.select('body').append("svg").attr("wid原创 2016-11-30 15:27:09 · 1487 阅读 · 0 评论 -
D3.js之饼图动画2
上篇只是说了饼图的从无到有的旋转动画,这次来说说怎么给饼图添加外接注释加连线,以及数据更新的动画。虽然d3.js写的麻烦,我看了几天echart,发现只要套套模板更改一下参数就行,但是d3可塑性很高,完全由你想象,想怎么画就怎么画。 头疼 button{ position: absolute; margin: 10原创 2016-11-24 10:46:40 · 2504 阅读 · 0 评论 -
d3.js之多组柱状图
参考博客有什么不知道的API可以参考D3中文API也可以去查看别人写的普通柱状图柱状图详解之前学习d3的时候就看到柱状图中有那种几组几组在一起,今天看到一个demo就是这种几组一起的。就去仔细看了那个Demo,并且写下这篇文章。这是V3版本思路:平时写的写的柱状图都是一个一个,那么怎么将一个柱状图中一个分成好几个呢。大概的思路就是这样的,其实他写了四个柱状图来将他拼凑在转载 2016-12-06 22:44:23 · 4646 阅读 · 0 评论 -
D3.JS之别人家的饼图动画
原文链接最近看到D3的demo库中有一个例子,他是从无到有旋转开来。他这个动画效果的。效果如下:在来看看我之前写的效果:对比一下就很容易看出来两个饼图旋转开来的区别了:第一个是所有的弧都开始从无到有变化第二个:是一个弧选旋转完成在到到下一弧开始旋转(具体实现看之前写的教程)本篇主要来说说第一个的实现。其实也没什么好说的,就是设置所原创 2016-12-07 18:45:07 · 3804 阅读 · 0 评论 -
D3.js之饼图动画
学习D3差不多一个月了。最近看了刚看了echart,发现他里面的饼图初始化的时候是从无到有的打开一圈。所以想要模仿这个动画效果。如果想要学习D3.js饼图布局可以去看这个网站: http://www.ourd3js.com开始的想法是这样的:先给出饼图从无到有展开花费的所有时间,再设计饼图每个弧所占的比例,乘以动画总时间,就每个弧所要执行的时间。在用一个delaytime变量保原创 2016-11-22 20:34:00 · 5180 阅读 · 1 评论 -
D3画个音乐播放器
灵感来源于一个D3学习群中的一个大神的demo,再加上自己学习D3一个半多月,看了很多Demo,总有一种看了知道是什么意思的,但是要让自己写,就写不出来的赶脚,所以就尝试做个小Demo来练练手。难度不大,主要在于自己把之前学的一些东西串起来。巩固一下自己知识点。主要使用到的就是d3(用于界面的绘制)和html5中audio的使用。下面就让我们一起来看下演示的效果,如下图:原创 2016-12-18 16:46:39 · 954 阅读 · 0 评论 -
D3.js之折线图动画
主要实现的效果一个折线图,然后线条可以从头到尾的出现。折线图的代码基本上是别人的(本人也是正在学习的),自己只是在这上面基础上添加动画和一些文字和circle参考:参考折线图的博客 参考SVG动画博客 .axis path, .axis line{ fill:none; stroke:black;原创 2016-11-28 23:13:11 · 7996 阅读 · 0 评论