{"id":4676,"date":"2017-03-17T17:22:34","date_gmt":"2017-03-17T08:22:34","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=4676"},"modified":"2020-05-28T15:42:17","modified_gmt":"2020-05-28T06:42:17","slug":"d3-%ec%8b%9c%ea%b3%84","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=4676","title":{"rendered":"D3\ub85c \uc2dc\uacc4 \ub9cc\ub4e4\uae30"},"content":{"rendered":"

“\uc18c\ud504\ud2b8\uc6e8\uc5b4 \uac1c\ubc1c\uc774 \uc88b\uc740 \uc0ac\ub78c”<\/a>\uc774\ub77c\ub294 \ube14\ub85c\uadf8\uc5d0\uc11c d3\ub97c \uc774\uc6a9\ud574 \uc544\ub0a0\ub85c\uadf8 \uc2dc\uacc4\ub97c \ub9cc\ub4e0 \uae00\uc744 \ubcf4\uace0 \ucf54\ub4dc\ub97c \uc0b4\ud3b4 \ubcf4\uc558\uc2b5\ub2c8\ub2e4. d3\ub294 \uac1c\uc778\uc801\uc73c\ub85c\ub3c4 \uad00\uc2ec\uc774 \ub9ce\uace0, \uc0c1\ub2f9\uc774 \uae4a\uc774 \uc788\uac8c \uacf5\ubd80\ub97c \ud588\ub358(\ud558\uc9c0\ub9cc \ud65c\uc6a9\ub825\uc740 \uc544\uc9c1\uae4c\uc9c0\ub3c4 \uc587\uc740..) \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uae30\ubc18\uc758 \ub370\uc774\ud130 \uc2dc\uac01\ud654 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. \uadf8 \uacb0\uacfc\ub294 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n

[xyz-ihs snippet=”D3-Clock”]<\/p>\n

\uc704\uc758 \uc2dc\uacc4\uc5d0 \ub300\ud55c \ucf54\ub4dc\ub97c d3\uc758 \ud559\uc2b5\uacb8 \ud574\uc11c \uc815\ub9ac\ud574 \ubcf4\uace0\uc790 \ud569\ub2c8\ub2e4. \uba3c\uc800 \uc2dc\uacc4\uc5d0 \ub300\ud55c \ubdf0\ub294 \uc544\ub798\ucc98\ub7fc \uc624\uc9c1 svg \ud0dc\uadf8 \ud558\ub098\uc785\ub2c8\ub2e4.<\/p>\n

\r\n<\/svg>\r\n<\/pre>\n
\uc2dc\uacc4\uc758 \ud06c\uae30\uc5d0 \ud574\ub2f9\ud558\ub294 \uc774 svg\uc758 \ud06c\uae30\ub97c \uc9c0\uc815\ud558\uae30 \uc704\ud574 \ub2e4\uc74c\ucc98\ub7fc \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud569\ub2c8\ub2e4.<\/p>\n
\r\n#clock {\r\n    width: 400px;\r\n    height: 400px;\r\n}\r\n<\/pre>\n
\uc2dc\uacc4\uc758 \uad6c\uc131\uc694\uc18c\ub294 \uc2dc\uacc4\uc758 \ud615\ud0dc\uc778 \ud070 \ub3d9\uadf8\ub77c\ubbf8 \ubd80\ubd84, 12\uac1c\uc758 \uc22b\uc790 \ubd80\ubd84, \uc2dc\ubd84\ucd08\uc5d0 \ub300\ud55c \ubc14\ub298 \ubd80\ubd84\uc73c\ub85c \uad6c\uc131\ub429\ub2c8\ub2e4. \uc2dc\ubd84\ucd08\uc5d0 \ub300\ud55c \ubc14\ub298\uc740 Timer\ub97c \uc0ac\uc6a9\ud574 1\ucd08\ub9c8\ub2e4 \uac31\uc2e0\ud574 \uc9c4\uc9dc \uc2dc\uacc4\ucc98\ub7fc \uc6c0\uc9c1\uc774\ub3c4\ub85d \ud569\ub2c8\ub2e4. <\/p>\n
\uc2a4\ud06c\ub9bd\ud2b8 \ucf54\ub4dc\ub97c \uc791\uc131\ud574 \ubcfc \uac83\uc778\ub370\uc694. \uac00\uc7a5 \uba3c\uc800 \uc55e\uc11c \ucd94\uac00\ud574\ub454 svg \uc694\uc18c\ub97c d3\uc758 \uc120\ud0dd\uc790\ub97c \uc774\uc6a9\ud574 \uc120\ud0dd\ud574 \ub461\ub2c8\ub2e4.<\/p>\n
\r\nvar clock = d3.select(\"#clock\");\r\n\r\nvar center = parseInt(clock.style(\"height\")) \/ 2;\r\nvar radius = center;\r\n<\/pre>\n
\uc704\uc758 \ucf54\ub4dc\ub294 \ucd94\uac00\uc801\uc73c\ub85c svg\uc758 \ub192\uc774\uac12\uc758 \ubc18\uac12\uc73c\ub85c \uc911\uc2ec\uc810\uc744 \uc704\ud55c center \ubcc0\uc218\uc640 \uc2dc\uacc4\uc758 \ubc18\uc9c0\ub984 \ud06c\uae30\uac12\uc744 \uc704\ud55c radius \ubcc0\uc218\ub3c4 \uc815\uc758\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc55e\uc11c \uc2dc\uacc4\ub294 3\uac1c\uc758 \ubd80\ubd84\uc73c\ub85c \uad6c\uc131\ub41c\ub2e4\uace0 \ud558\uc600\ub294\ub370\uc694. \ub2e4\uc2dc \uc5b8\uae09\ud558\uba74 \uc2dc\uacc4\uc758 \ud615\ud0dc\uc778 \ud070 \ub3d9\uadf8\ub77c\ubbf8 \ubd80\ubd84, 12\uac1c\uc758 \uc22b\uc790 \ubd80\ubd84, \uc2dc\ubd84\ucd08\uc5d0 \ub300\ud55c \ubc14\ub298 \ubd80\ubd84\uc785\ub2c8\ub2e4. \uba3c\uc800 \uc2dc\uacc4\uc758 \ud615\ud0dc\uc778 \ud070 \ub3d9\uadf8\ub77c\ubbf8 \ubd80\ubd84\uc744 \uadf8\ub9ac\ub294 \ud568\uc218 drawFace\ub97c \ubc18\uc9c0\ub984\uac12(radius \ubcc0\uc218)\uc744 \uc778\uc790\ub85c \ud574 \ud638\ucd9c\ud569\ub2c8\ub2e4.<\/p>\n
\r\ndrawFace(radius);\r\n\r\nfunction drawFace(radius) {\r\n    clock.append(\"circle\")\r\n        .attr(\"cx\", center)\r\n        .attr(\"cy\", center)\r\n        .attr(\"r\", radius)\r\n        .attr(\"class\", \"face\");\r\n\r\n    clock.append(\"circle\")\r\n        .attr({ \r\n            \"cx\": center, \r\n            \"cy\": center, \r\n            \"r\": radius * 0.1, \r\n            \"fill\": \"#000\" \r\n        });\r\n}\r\n<\/pre>\n
\uc704\uc758 \ucf54\ub4dc\uc5d0\uc11c face\ub77c\ub294 class\ub97c \ud1b5\ud574 \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud558\uace0 \uc788\ub294\ub370\uc694. \uc774 .face\uc5d0 \ub300\ud55c \uc2a4\ud0c0\uc77c \uc815\uc758\ub294 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\n.face {\r\n    fill : #FFF;\r\n    stroke-width: 2px;\r\n    stroke: #000;\r\n}\r\n<\/pre>\n
\ub610 \uc544\ub798\ub294 12\uac1c\uc758 \uc22b\uc790 \ubd80\ubd84\uc744 \uad6c\uc131\ud558\ub294 \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n
\r\ndrawNumbers(radius);\r\n\r\nfunction drawNumbers(radius) {\r\n    var pos = radius * 0.85;\r\n    for (var num = 1; num < 13; num++) {\r\n        var deg = 30 * num;\r\n        var x = pos * Math.cos(Math.PI * (deg - 90) \/ 180);\r\n        var y = pos * Math.sin(Math.PI * (deg - 90) \/ 180);\r\n        var cx = x + center;\r\n        var cy = y + center;\r\n        var text = clock.append(\"text\")\r\n            .attr({ \"x\": cx, \"y\": cy, \"class\": \"number\" })\r\n            .text(num)\r\n            .style(\"font-size\", radius * 0.15 + \"px\")\r\n            .attr(\"transform\", \"rotate(\" + deg + \", \" + cx + \", \" + cy + \")\");\r\n    }\r\n}\r\n<\/pre>\n
\uc704\uc758 \ucf54\ub4dc\uc5d0\uc11c number\ub77c\ub294 class\ub97c \ud1b5\ud574 \uc22b\uc790\uc758 \ubb38\uc790 \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud558\uace0 \uc788\ub294\ub370\uc694. \uc774 .number\uc5d0 \ub300\ud55c \uc2a4\ud0c0\uc77c \uc815\uc758\ub294 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\n.number {\r\n    font-family: arial;\r\n    text-anchor: middle;\r\n    text-align: center;\r\n}\r\n<\/pre>\n
\ub610 \uc544\ub798\ub294 \uc2dc, \ubd84, \ucd08\uc5d0 \ub300\ud55c \ubc14\ub298\uc744 \uad6c\uc131\ud558\ub294 \ucf54\ub4dc\uc785\ub2c8\ub2e4. \uc2dc\uce68, \ubd84\uce68, \ucd08\uce68\uc744 \uac01\uac01 hourHand, minuteHand, secondHand \ubcc0\uc218\uc5d0 \uc800\uc7a5\ud558\uace0 \uc788\ub294\ub370\uc694. \uc774 \ubcc0\uc218\ub97c \ud1b5\ud574 1\ucd08\ub9c8\ub2e4 \uac01 \uce68\uc758 \ud615\ud0dc\ub97c \ubcc0\uacbd\ud574 \uc8fc\uac8c \ub429\ub2c8\ub2e4.<\/p>\n
\r\nvar hourHand = drawHand(0, 0, radius*0.07);\r\nvar minuteHand = drawHand(0, 0, radius*0.05);\r\nvar secondHand = drawHand(0, 0, radius*0.01);\r\n\r\nfunction drawHand(x, y, width) {\r\n    var hand = clock.append(\"line\")\r\n        .attr({ \r\n            \"x1\": center, \r\n            \"y1\": center, \r\n            \"x2\": x + center, \r\n            \"y2\": y + center, \r\n            \"class\": \"hands\" })\r\n        .style(\"stroke-width\", width);\r\n\r\n    return hand;\r\n}\r\n<\/pre>\n
\uc704\uc758 \ucf54\ub4dc\uc5d0\uc11c hand\ub77c\ub294 class\ub97c \ud1b5\ud574 \ubc14\ub298\uc758 \uc2a4\ud0c0\uc77c\uc744 \uc815\uc758\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc774 .hand\uc5d0 \ub300\ud55c \uc2a4\ud0c0\uc77c \uc815\uc758\ub294 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\n.hands {\r\n    stroke: #000;\r\n    stroke-linecap: round;\r\n}\r\n<\/pre>\n
\uc774\uc81c 1\ucd08\ub9c8\ub2e4 \uc81c \uc2dc\uac04\uc5d0 \ub9de\uac8c \ubc14\ub298\uc744 \uc6c0\uc9c1\ub3c4\ub85d \ud558\ub294 \ucf54\ub4dc\ub294 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\ndrawClock();\r\n\r\nfunction drawClock() {\r\n    drawTime(radius);\r\n    setTimeout(drawClock, 1000);\r\n}\r\n<\/pre>\n
\uc704\uc758 \ucf54\ub4dc\uc5d0\uc11c 1\ucd08\ub9c8\ub2e4 \uc2e4\ud589\ub418\ub294 drawTime\uc758 \ud568\uc218\uac00 \ubcf4\uc774\ub294\ub370\uc694. \ubc14\ub85c \uc774 drawTime\uc774 3\uac1c\uc758 \ubc14\ub298\uc744 \ud604\uc7ac \uc2dc\uac04\uc5d0 \ub9de\uac8c \uadf8 \ud615\uc0c1\uc744 \ubcc0\uacbd\ud574 \uc8fc\ub294 \ud568\uc218\uc774\uba70 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\nfunction drawTime(radius){\r\n    var now = new Date();\r\n    var hour = now.getHours();\r\n    var minute = now.getMinutes();\r\n    var second = now.getSeconds();\r\n\t\r\n    \/\/hour\r\n    var pos = radius * 0.5;\r\n    x = pos * Math.cos(Math.PI*((hour*30)-90+30\/60*minute+30\/60\/60*second)\/180); \r\n    y = pos * Math.sin(Math.PI*((hour*30)-90+30\/60*minute+30\/60\/60*second)\/180);\r\n    hourHand.attr({\"x1\": center, \"y1\": center, \"x2\": x+center, \"y2\": y+center});\r\n\r\n    \/\/minute\r\n    pos = radius*0.65;\r\n    x = pos * Math.cos(Math.PI*((minute*6)-90+6\/60*second)\/180); \r\n    y = pos * Math.sin(Math.PI*((minute*6)-90+6\/60*second)\/180);\r\n    minuteHand.attr({\"x1\": center, \"y1\": center, \"x2\": x+center, \"y2\": y+center});\r\n\t\r\n    \/\/ second\r\n    pos = radius*0.9;\r\n    x = pos * Math.cos(Math.PI* ((second*6)-90)\/180); \r\n    y = pos * Math.sin(Math.PI* ((second*6)-90)\/180);\r\n    secondHand.attr({\"x1\": center, \"y1\": center, \"x2\": x+center, \"y2\": y+center});\r\n}\r\n<\/pre>\n
\uc774\uc0c1\uc73c\ub85c d3\ub97c \uc774\uc6a9\ud574 svg \uc694\uc18c\ub97c \uc2dc\uacc4\ub85c \ub9cc\ub4e4\uc5b4 \ubcf4\ub294 \ucf54\ub4dc\ub97c \uc0b4\ud3b4\ubcf4\uc558\uc2b5\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"
“\uc18c\ud504\ud2b8\uc6e8\uc5b4 \uac1c\ubc1c\uc774 \uc88b\uc740 \uc0ac\ub78c”\uc774\ub77c\ub294 \ube14\ub85c\uadf8\uc5d0\uc11c d3\ub97c \uc774\uc6a9\ud574 \uc544\ub0a0\ub85c\uadf8 \uc2dc\uacc4\ub97c \ub9cc\ub4e0 \uae00\uc744 \ubcf4\uace0 \ucf54\ub4dc\ub97c \uc0b4\ud3b4 \ubcf4\uc558\uc2b5\ub2c8\ub2e4. d3\ub294 \uac1c\uc778\uc801\uc73c\ub85c\ub3c4 \uad00\uc2ec\uc774 \ub9ce\uace0, \uc0c1\ub2f9\uc774 \uae4a\uc774 \uc788\uac8c \uacf5\ubd80\ub97c \ud588\ub358(\ud558\uc9c0\ub9cc \ud65c\uc6a9\ub825\uc740 \uc544\uc9c1\uae4c\uc9c0\ub3c4 \uc587\uc740..) \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uae30\ubc18\uc758 \ub370\uc774\ud130 \uc2dc\uac01\ud654 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. \uadf8 \uacb0\uacfc\ub294 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4. [xyz-ihs snippet=”D3-Clock”] \uc704\uc758 \uc2dc\uacc4\uc5d0 \ub300\ud55c \ucf54\ub4dc\ub97c d3\uc758 \ud559\uc2b5\uacb8 \ud574\uc11c \uc815\ub9ac\ud574 \ubcf4\uace0\uc790 \ud569\ub2c8\ub2e4. \uba3c\uc800 \uc2dc\uacc4\uc5d0 \ub300\ud55c \ubdf0\ub294 \uc544\ub798\ucc98\ub7fc \uc624\uc9c1 svg … <\/p>\n
\ub354 \ubcf4\uae30 “D3\ub85c \uc2dc\uacc4 \ub9cc\ub4e4\uae30”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[88],"tags":[],"class_list":["post-4676","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/4676","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4676"}],"version-history":[{"count":12,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/4676\/revisions"}],"predecessor-version":[{"id":9683,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/4676\/revisions\/9683"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4676"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4676"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4676"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}