今天做了一个小时钟动画，因为我学画布的时候也做了一个时钟，所以就想能不能用d3做一个时钟动画。

主要采用饼图的布局，增加了圆形的颜色渐变效果。

！doctype html lang=' en ' head meta charset=' utf-8 ' title hold/title/head body脚本类型=' text/JavaScript' src='./././js/D3 . js '/script script type=' text/JavaScript ' var width=500，height=500 var SVG=D3 . select(' body ')。追加(' svg ')。attr('width '，width)。attr('高度'，高度)；Var内半径=190，//圆的内半径和外半径=200；var arc=d 3 . SVG . arc()//arc generator . inner radius(内半径)//设置内半径，0为实心圆. outer radius(外半径)；//设置外半径//下面这个数组的功能如下：//首先我的圆的颜色是渐变的，我的渐变方法是把圆切成很多部分，每个部分在渐变过程中都是一种颜色。//剪切副本多的时候看起来像渐变。//下面的时针、分针、秒针在指向不同角度时也会改变颜色。//当然，我也看到了圆渐变的其他方法。你可以自己搜索。var sum=1000//sum表示圆被分成多少部分。var num=新数组()；for(var I=0；我求和；I){ num . push(1)；} var linear=d3.scale.linear() //通过线性比例计算插值。域([0，sum])。范围([0，1]) vararcs=SVG。选择全部(' g ')。data(D3 . layout . pie()(num))//绑定转换后的数据piedata.enter()。追加(' g ')。attr 'translate(' (width/2)'，'(height/2)')')；var color=D3 . scale . category y10()var a=D3 . RGB(0，255，255)；//红色设置渐变颜色的起始var b=d3.rgb(255，255，0)；//绿色var c=d3.rgb(255，0，0)；var compute=d3.interpolate，b)；//他的值是arcs。追加('路径')。attr ('fill '，函数(d，I){ return compute(linear(I))；//通过上面的线性比例函数看看我目前是多少。

当然也可以直接(1/sum*i) }).attr('笔画宽度',' 0 ')。attr('d '，函数(d) {返回弧(d)}；//使用弧生成器});//下面是给将圆给分成了60等份var num2=新数组();for(var I=0；i 60I)num 2。推(我)；var ticks=svg.append('g ').选择全部(" g ").数据(num2).输入()。追加(' g ').attr('transform '，' translate '(width/2)'，'(height/2)')')；ticks.append('line ').attr('x1 '，1).attr('x1 '，0).attr('x2 '，函数(d，i){返回i==0？10:6;//添加圆内的刻度线根据是不是3、6、9、12来判断是否加长}) .attr('y2 '，0).attr('转换'，函数(d，I){ return ' rotate('(6 * I-90)')' translate('(inner radius-10)')'；}) .样式('笔画'，函数(d，I){返回计算(I/60)；}) .样式('笔画宽度',5);ticks.append('text ').attr('转换'，函数(d，i) { var angle=(Math .PI * 2)/60 * i -数学.PI；返回“翻译”((数学。sin(角度)*(内半径-20)))”、”(数学。cos(角度)*(内半径-20))”；}) .attr('x '，8).attr('dy '，35em ').样式('字体大小'，函数(d，i) { if (i % 15==0)返回2em' }).style('text-anchor '，function(d) { return i 29？end ' : null})。文本(函数(d，i) {返回！(i % 5)？(60-I)/5 :空；});var arc2=d3.svg.arc().内半径(0)。外半径(10);svg.selectAll('g ').data(d3.layout.pie()(num)).输入()。附加(' g ')弧。附加('路径')。attr('填充'，函数(d，i) {返回计算(线性(i)) }).attr('d '，函数(d，I){返回弧2(d)；});var SecondsLine=svg.append('g ').追加('行')。attr('x1 '，宽度/2)。attr('y1 '，高度/2)。样式('笔画宽度，1) var MinutesLine=svg.append('g ').追加('行')。attr('x1 '，宽度/2)。attr('y1 '，高度/2)。样式('笔画宽度，3) var HoursLine=svg.append('g ').追加('行')。attr('x1 '，宽度/2)。attr('y1 '，高度/2)。样式('笔画宽度',5);var str=[1]；var updatetime text=SVG。追加(' g ').选择全部('。timetext ').数据（字符串)。输入()。追加('文本')。attr('class '，' timetext ').文本(函数(d，I){返回d；}) .attr('转换'，函数(d，i) { return 'translate(' (width/2)'，'(height - 20) ')' }).样式('文本锚','中间')。样式(' font-size '，' 2em ')；函数李俶(){ var d=新日期()；var DM=d . GetTime()% 1000；var h=(d.getHours()=12？d . gethours()-12 :d。gethours())；var m=d . GetMinutes()；var s=d . getseconds()；变化角度=(数学* 2)/60 *(60-s)数学；var angle2=(数学* 2)/(60 * 60)*((60 * 60-m * 60-s))数学；var angle3=(数学PI * 2)/(12 * 60 * 60)*(12 * 60 * 60-h * 60 * 60-m * 60-s)数学；SecondsLine.attr('x2 '，函数(d，i) {返回宽度/2(内半径- 30) *数学角度);}) .attr('y2 '，函数(d，i) {返回高度/2(内半径- 30) *数学cos(角度);}) .样式('笔画，计算机((s/60))；分钟直线. attr('x2 '，函数(d，I){返回宽度/2(内半径-50)*数学。sin(角度2)；}) .attr('y2 '，函数(d，i) {返回高度/2(内半径-50)*数学。cos(角度2)；}) .样式('笔画，计算机((m/60))；HoursLine.attr('x2 '，函数(d，i) {返回宽度/2(内半径-80)*数学。sin(角度3)；}) .attr('y2 '，函数(d，i) {返回高度/2(内半径-80)*数学。cos(角度3)；}) .style('stroke '，compute((h/12)))；字符串。pop()；//删除上一个文本字符串。push(d . gethours()' : '(M10？0' m:m) ':' (s10？0s 3360s))；//存入新的时间并且一位数时补0 updatetimetext.data(str).文本(函数(d){返回d；}) //更新时间setTimeout(李俶，1000德国马克);//获取当前的毫秒，用1000减去，则是到下一秒的毫秒时间}李俶();/脚本/正文/html效果图：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。