基于D3.js實現時鐘效果

2019-11-19 13:28:45

字體：大中小

來源：轉載

供稿：網友

今天做了一個小時鐘動畫，因為學習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?10:6; //添加圓內的刻度線 根據是不是3、6、9、12來判斷是否加長   })   .attr("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) ? (60 - i) / 5 : null; });  var arc2 = d3.svg.arc().innerRadius(0).outerRadius(10);  svg.selectAll('g') .data(d3.layout.pie()(num)) .enter() .append('g') arcs.append("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 ? d.getHours() - 12 : d.getHours()); var m = d.getMinutes(); var s = d.getSeconds(); var angle = (Math.PI * 2) / 60 * (60 - s) + Math.PI; var angle2 = (Math.PI * 2) / (60 * 60) * ((60 * 60 - m * 60-s)) + Math.PI; var angle3 = (Math.PI * 2) / (12 * 60 * 60) * (12 * 60 * 60 - h * 60 * 60 - m * 60 - s) + Math.PI; SecondsLine.attr('x2', function(d, i) {  return width / 2 + (innerRadius - 30) * Math.sin(angle); }) .attr('y2', function(d, i) {  return height / 2 + (innerRadius - 30) * Math.cos(angle); }) .style('stroke', compute((s / 60)));  MinutesLine.attr('x2', function(d, i) {  return width / 2 + (innerRadius - 50) * Math.sin(angle2); }) .attr('y2', function(d, i) {  return height / 2 + (innerRadius - 50) * Math.cos(angle2); }) .style('stroke', compute((m / 60)));  HoursLine.attr('x2', function(d, i) {  return width / 2 + (innerRadius - 80) * Math.sin(angle3); }) .attr('y2', function(d, i) {  return height / 2 + (innerRadius - 80) * Math.cos(angle3); }) .style('stroke', compute((h / 12)));  str.pop();    //刪除上一個文本 str.push(d.getHours()+":"+(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>

效果圖：