我的【数据可视化】——d3.js(2)--绘制简易clock

最新推荐文章于 2024-07-23 11:32:13 发布

kongxiaoming2333

最新推荐文章于 2024-07-23 11:32:13 发布

阅读量1.5k

点赞数 1

分类专栏：数据可视化文章标签： d3.js javascript svg

本文链接：https://blog.csdn.net/kongxiaoming2333/article/details/22690455

版权

数据可视化专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在看了第一篇文章提到的那本书之后，就开始动手练习，室友一哥们因为正专心学习安卓，于是想写一个时钟来练手，我一想，那就跟个风，画个表？于是有了这篇文章，在经过几个小时的努力之后，有了如下成果。

首先，绘制静态的表盘，图片如下：

主要的思路就是：

1.绘制圆，利用svg 中的circle

2.绘制三条直线，作为时针，分针，秒针

3.绘制刻度，这里只是简单的绘制了四个刻度

下一步，就是想办法让表针动起来

利用 javascript的setInterval方法，设置时间间隔为1000ms即1秒

最关键的就是设置line元素的transform属性，这里涉及到坐标的变换，就是由直角坐标转换为极坐标

详见 http://www.cnblogs.com/jenry/archive/2010/12/11/1903397.html

transform=rotate(hourangle, 300, 300)，第一个参数就是角度，1就代表1度，后两个为圆心的坐标

最后就是角度的计算问题了，目前我的表在这方面还有些问题，有待改进

以下是完整代码，注意引入d3.js的路径

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script type="text/javascript" src="d3js/d3.js"></script>
</head>
<body>

<script>
var svgContainer = d3.select("body").append("svg")
                                    .attr("width", 800)
                                    .attr("height", 600);


 svgContainer.append("circle")
                            .attr("cx", "300")
                            .attr("cy", "300")
			    .attr("r","300")
                            .attr("stroke", "blue")
                            .attr("stroke-width", 6)
                            .attr("fill", "none");
 svgContainer.append("line")
                            .attr("x1","300")
                            .attr("y1","300")
                            .attr("x2","400")
                            .attr("y2","400")
                            .attr("stroke","red")
                            .attr("stroke-width", 3)
                            .attr("id","hour")
 svgContainer.append("line")
                            .attr("x1","300")
                            .attr("y1","300")
                            .attr("x2","420")
                            .attr("y2","430")
                            .attr("stroke","pink")
                            .attr("stroke-width", 2)
                            .attr("id","minute")
 svgContainer.append("line")
                            .attr("x1","300")
                            .attr("y1","300")
                            .attr("x2","460")
                            .attr("y2","470")
                            .attr("stroke","yellow")
                            .attr("stroke-width", 1)
                            .attr("id","second")


        svgContainer.append("line")
                            .attr("x1","300")
                            .attr("y1","0")
                            .attr("x2","300")
                            .attr("y2","10")
                            .attr("stroke","blue")
                            .attr("stroke-width", 6);
        svgContainer.append("line")
                            .attr("x1","600")
                            .attr("y1","300")
                            .attr("x2","590")
                            .attr("y2","300")
                            .attr("stroke","blue")
                            .attr("stroke-width", 6);
        svgContainer.append("line")
                            .attr("x1","300")
                            .attr("y1","600")
                            .attr("x2","300")
                            .attr("y2","590")
                            .attr("stroke","blue")
                            .attr("stroke-width", 6);
        svgContainer.append("line")
                            .attr("x1","0")
                            .attr("y1","300")
                            .attr("x2","10")
                            .attr("y2","300")
                            .attr("stroke","blue")
                            .attr("stroke-width", 6);


window.setInterval(function(){ 
    var now = new Date();
    var sec = now.getSeconds();
    var min = now.getMinutes();
    var hou = (now.getHours() % 12) + min / 60;
    var secondangle = sec * 6; //6 degrees for every minute
    var minangle = min * 6+180;        //6 degrees for every minute
    var hourangle = hou * 30+180;    //30 degrees for every hour
    var second =document.getElementById("second");            
    second.setAttribute("transform","rotate("+secondangle+", 300, 300)");
    var minute =document.getElementById("minute");            
    minute.setAttribute("transform","rotate("+minangle+", 300, 300)");
    var hour =document.getElementById("hour");            
    hour.setAttribute("transform","rotate("+hourangle+", 300, 300)");
                           
},1000)

</script> 



</body>

革命尚未成功，同志仍需努力！

kongxiaoming2333

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
我的【数据可视化】——d3.js(2)--绘制简易clock

在看了第一篇文章提到的那本书之后，就开始动手联系，室友一哥们因为正专心学习安卓，于是想写一个时钟来练手，我一想，那就跟个风，画个表？于是有了这篇文章，在经过几个小时的努力之后，有了如下成果。首先，绘制静态的表盘，图片如下：主要的思路就是： 1.绘制圆，利用svg 中的circle 2.绘制三条直线，作为时针，分针，秒针 3.绘制刻度
复制链接

扫一扫

专栏目录