var showD3Clock = function() { var w = 320 // Width of SVG element var h = 320 // Height of SVG element var cx = w / 2 // Center x var cy = h / 2 // Center y var margin = 4 var r = w / 2 - margin // Radius of clock face var svg = d3.select("body").append("svg") .attr("class", "clock") .attr("width", w) .attr("height", h) makeClockFace() // Create hands from dataset svg.selectAll("line.hand") .data(getTimeOfDay()) .enter() .append("line") .attr("class", function (d) { return d[0] + " hand"}) .attr("x1", cx) .attr("y1", function (d) { return cy + handBackLength(d) }) .attr("x2", cx) .attr("y2", function (d) { return r - handLength(d)}) .attr("transform", rotationTransform) // Update hand positions once per second setInterval(updateHands, 1000) function makeClockFace() { var hourTickLength = Math.round(r * 0.2) var minuteTickLength = Math.round(r * 0.075) for (var i = 0; i < 60; ++i) { var tickLength, tickClass if ((i % 5) == 0) { tickLength = hourTickLength tickClass = "hourtick" } else { tickLength = minuteTickLength tickClass = "minutetick" } svg.append("line") .attr("class", tickClass + " face") .attr("x1", cx) .attr("y1", margin) .attr("x2", cx) .attr("y2", margin + tickLength) .attr("transform", "rotate(" + i * 6 + "," + cx + "," + cy + ")") } } function getTimeOfDay() { var now = new Date() var hr = now.getHours() var min = now.getMinutes() var sec = now.getSeconds() return [ [ "hour", hr + (min / 60) + (sec / 3600) ], [ "minute", min + (sec / 60) ], [ "second", sec ] ] } function handLength(d) { if (d[0] == "hour") return Math.round(0.45 * r) else return Math.round(0.90 * r) } function handBackLength(d) { if (d[0] == "second") return Math.round(0.25 * r) else return Math.round(0.10 * r) } function rotationTransform(d) { var angle if (d[0] == "hour") angle = (d[1] % 12) * 30 else angle = d[1] * 6 return "rotate(" + angle + "," + cx + "," + cy + ")" } function updateHands() { svg.selectAll("line.hand") .data(getTimeOfDay()) .transition().ease("bounce") .attr("transform", rotationTransform) } } showD3Clock()
svg.clock { stroke-linecap: round; } .face { stroke: #aac; stroke-width: 6; } .hourtick.face { } .minutetick.face { stroke-width: 2; } .hand { stroke: #336; stroke-width: 8; } .hour.hand { stroke-width: 12; } .minute.hand { } .second.hand { stroke: red; stroke-width: 4; }
<body></body>