基于D3.js实现时钟效果

站长资源 2024/11/26 佚名

47 1538 47

DDR爱好者之家 Design By 杰米

今天做了一个小时钟动画，因为学习canvas也做过一个时钟，所以想着可不可以使用d3来做个时钟动画。

主要利用的还是饼图这个布局，添加了一个圆形颜色渐变的效果。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>时钟</title>
</head>
<body>
 
 <script type="text/javascript" src='../../../js/d3.js'></script>
 <script type="text/javascript">
 
 var width = 500,
 height = 500;
 var svg = d3.select('body').append("svg").attr("width", width).attr("height", height);
 var innerRadius = 190, //圆的内半径、外半径
 outerRadius = 200; 
 var arc = d3.svg.arc() //弧生成器
 .innerRadius(innerRadius) //设置内半径、0则为实心圆
 .outerRadius(outerRadius); //设置外半径
 
 //下面的数组的作用是这样的：
 //首先我的圆的颜色渐变的，而我的渐变方法是将圆切割成很多份，每份是渐变过程中的一个颜色。
 //当切割的份数多的时候就是看起来像渐变的一样。 
 //下面的时针、分针、秒针也会在指着不同的角度的时候同时改变自身的颜色。
 //当然也看到了其他的圆渐变的方法，你可以自己搜索。
 var sum = 1000; //sum代表圆被分成了多少份。 
 var num = new Array(); 
 for (var i = 0; i < sum; i++) {
 num.push(1);
 }
 var linear = d3.scale.linear() //通过线性比例尺来计算插值。
 .domain([0, sum])
 .range([0, 1])
 var arcs = svg.selectAll("g")
 .data(d3.layout.pie()(num)) //绑定转换后的数据piedata
 .enter()
 .append("g")
 .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");
 
 var color = d3.scale.category10()
 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(a, b); //他的值是介于0-1的
 
 
 arcs.append("path")
 .attr('fill', function(d, i) {
 return compute(linear(i)); //通过上面的linear比例函数看i当前是在多少。当然也可以直接(1/sum*i)
 })
 .attr('stroke-width', "0")
 .attr("d", function(d) {
 return arc(d); //使用弧生成器
 });
 
 //下面是给将圆给分成了60等份
 var num2 = new Array();
 for (var i = 0; i < 60; i++) num2.push(i);
 var ticks = svg.append('g').selectAll('g')
 .data(num2)
 .enter()
 .append('g')
 .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")")
 ;
 
 ticks.append("line")
   .attr("x1", 1)
   .attr("x1", 0)
   .attr("x2", function(d,i){
    return i%15==0"y2", 0)
   .attr('transform',function(d,i){
    
    return "rotate(" + (6*i -90) + ")" 
      + "translate(" + (innerRadius-10) +")";
   })
   .style('stroke',function(d,i){
    return compute(i/60);
   })
   .style('stroke-width',5); 
 
 ticks.append("text")
 .attr('transform', function(d, i) {
 var angle = (Math.PI * 2) / 60 * i - Math.PI;
 return "translate(" + (Math.sin(angle) * (innerRadius - 20) ) + "," + (Math.cos(angle) * (innerRadius - 20) )+ ")";
 })
 .attr("x", 8)
 .attr("dy", ".35em")
 .style('font-size', function(d, i) {
 if (i % 15 == 0)
  return "2em"
 })
 .style("text-anchor", function(d) {
 return i > 29 "end" : null;
 })
 .text(function(d, i) {
 return !(i % 5) "path")
 .attr('fill', function(d, i) {
 return compute(linear(i))
 })
 .attr("d", function(d, i) {
 return arc2(d);
 });
 
 var SecondsLine = svg.append('g').append('line')
 .attr("x1", width / 2)
 .attr("y1", height / 2)
 .style('stroke-width', 1)
 
 
 var MinutesLine = svg.append('g').append('line')
 .attr('x1', width / 2)
 .attr('y1', height / 2)
 .style('stroke-width', 3)
 
 var HoursLine = svg.append('g').append('line')
 .attr('x1', width / 2)
 .attr('y1', height / 2)
 .style('stroke-width', 5);
 
 var str=[1];
 var updatetimetext=svg.append('g')
 .selectAll('.timetext').data(str)
 .enter()
 .append('text')
 .attr('class', 'timetext')
 .text(function(d, i) {
  return d;
 })
 .attr('transform', function(d, i) {
  return "translate(" + (width / 2) + "," + (height - 20) + ")"
 })
 .style('text-anchor', "middle")
 .style('font-size', "2em");
 function chuli() {
 var d = new Date();
 var dm = d.getTime() % 1000;
 var h = (d.getHours() >= 12 ":"+(m<10"0"+m:m)+":"+(s<10"0"+s:s)); //存入新的时间并且一位数时补0
 updatetimetext.data(str).text(function(d){return d;}) //更新时间
  
 
 
 setTimeout(chuli, 1000 - dm);//获取当前的毫秒，用1000减去，则是到下一秒的毫秒时间。
 }
 chuli();
 
 </script>
</body>
</html>

效果图：

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

D3.js,时钟

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“基于D3.js实现时钟效果”

暂无评论...

基于D3.js实现时钟效果

JS中实现隐藏部分姓名或者电话号码的代码

vue生成token并保存到本地存储中

评论“基于D3.js实现时钟效果”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接