{"id":4458,"date":"2015-08-31T15:59:12","date_gmt":"2015-08-31T06:59:12","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=4458"},"modified":"2015-08-31T15:59:12","modified_gmt":"2015-08-31T06:59:12","slug":"post-4458","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/d3-js\/4458","title":{"rendered":"\u3010D3.js\u3011Drag \u30d3\u30d8\u30a4\u30d3\u30a2\u5b66\u7fd2\u4e2d\u3002"},"content":{"rendered":"<p><a href=\"http:\/\/bl.ocks.org\/shimizu\/82070184834ac5f9607b\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2015\/08\/d3dragexample150831.jpg\" alt=\"d3 drag example\" width=\"590\" height=\"295\" class=\"aligncenter size-full wp-image-4459 border\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2015\/08\/d3dragexample150831.jpg 590w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2015\/08\/d3dragexample150831-500x250.jpg 500w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2015\/08\/d3dragexample150831-300x150.jpg 300w\" sizes=\"auto, (max-width: 590px) 100vw, 590px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/bl.ocks.org\/shimizu\/82070184834ac5f9607b\">example<\/a><\/p>\n<p>\u4e0a\u8a18\u30b5\u30f3\u30d7\u30eb\u306f\u3001circle\u8981\u7d20\u3092\u9069\u5f53\u306b\u3050\u308a\u3050\u308a\u30c9\u30e9\u30c3\u30b0\u3059\u308b\u3068\u5fae\u5999\u306b\u9762\u767d\u3044\u52d5\u304d\u3092\u3057\u307e\u3059\u3002<\/p>\n<p>\u2026\u2026\u307e\u3041\u3001\u5730\u5473\u3067\u3059\u304c\u3002<\/p>\n<p>\u3053\u3046\u3044\u3063\u305f\u5730\u5473\u306a\u52c9\u5f37\u304c\u3001\u30c7\u30fc\u30bf\u30d3\u30b8\u30e5\u30a2\u30e9\u30a4\u30bc\u30fc\u30b7\u30e7\u30f3\u306e\u64cd\u4f5c\u611f\u306e\u5411\u4e0a\u306a\u3069\u306b\u5f79\u7acb\u3064\u306f\u305a\uff01\u3068\u4fe1\u3058\u3066\u6700\u8fd1\u306f\u3053\u3093\u306a\u3053\u3068\u3070\u304b\u308a\u3084\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n<h2>\u57fa\u672c<\/h2>\n<p>\u30c9\u30e9\u30c3\u30b0\u30d3\u30d8\u30a4\u30d3\u30a2\u306e\u4f7f\u3044\u65b9\u306f\u975e\u5e38\u306b\u7c21\u5358\u3067\u30c9\u30e9\u30c3\u30b0\u6642\u306e\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3092\u8a2d\u5b9a\u3057\u3001\u8981\u7d20\u306bcall\u30e1\u30bd\u30c3\u30c9\u3092\u7528\u3044\u3066\u675f\u7e1b\u3059\u308b\u3060\u3051\u3067\u3059\u3002<br \/>\n\u2193\u4f8b\uff09\u56db\u89d2\u3092\u30c9\u30e9\u30c3\u30b0\u3059\u308b\u3068\u52d5\u304d\u307e\u3059\u3002<br \/>\n<iframe loading=\"lazy\" width=\"599\" height=\"332\" scrolling=\"no\" style=\"border:1px solid #ccc\" src=\"http:\/\/shimz.me\/example\/d3js\/behavior\/drag\/01\/index.html\" class=\"aligncenter\"><\/iframe><\/p>\n<p><a href=\"http:\/\/shimz.me\/example\/d3js\/behavior\/drag\/01\/index.html\">example<\/a><\/p>\n<pre class=\"lang:js decode:true \" >var svg = d3.select('svg');\r\n\r\n\/\/rect(\u56db\u89d2\u5f62)\u3092\u8ffd\u52a0\u3059\u308b\r\nvar rect = svg.append('rect')\r\n\t.attr({\r\n\t\t'width':100,\r\n\t\t'height':30,\r\n\t\t'fill': 'blue',\r\n\t\t'x':10,\r\n\t\t'y':50\r\n\t});\r\n\r\n\/\/\u30c9\u30e9\u30c3\u30b0\u30d3\u30d8\u30a4\u30d3\u30a2\u3092\u7528\u610f\t\r\nvar drag = d3.behavior.drag()\r\n    .on(\"drag\", function(d){\r\n\t\t\/\/\u30c9\u30e9\u30c3\u30b0\u3057\u305f\u8981\u7d20\u306ex,y\u5c5e\u6027\u306b\u30de\u30a6\u30b9\u5ea7\u6a19\u3092\u9069\u7528\u3055\u305b\u308b\r\n\t\td3.select(this)\r\n\t\t.attr({\r\n\t\t\t'x':d3.event.x,\r\n\t\t\t'y':d3.event.y\r\n\t\t})\r\n\t});\r\n\r\n\/\/\u30c9\u30e9\u30c3\u30b0\u30d3\u30d8\u30a4\u30d3\u30a2\u3092rect\u8981\u7d20\u306b\u675f\u7e1b\u3059\u308b\t\r\nrect.call(drag);\t<\/pre>\n<p>\u3053\u308c\u3060\u3051\u3067\u3001\u8981\u7d20\u3092\u30c9\u30e9\u30c3\u30b0\u3057\u3066\u79fb\u52d5\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<h2>\u5fdc\u7528<\/h2>\n<p>\u30c9\u30e9\u30c3\u30b0\u6642\u306e\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3067rect\u8981\u7d20\u306ex,y\u5ea7\u6a19\u3092\u9069\u7528\u3059\u308b\u969b\u306b\u30c8\u30e9\u30f3\u30b8\u30b7\u30e7\u30f3\u3092\u8a2d\u5b9a\u3059\u308b\u3068\u3001\u30c9\u30e9\u30c3\u30b0\u306b\u5c11\u3057\u9045\u308c\u3066\u8ffd\u5f93\u3059\u308b\u3088\u3046\u306a\u9762\u767d\u3044\u52d5\u304d\u3092\u4ed8\u3051\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p><iframe loading=\"lazy\"  width=\"599\" height=\"332\" scrolling=\"no\" style=\"border:1px solid #ccc\" src=\"http:\/\/shimz.me\/example\/d3js\/behavior\/drag\/02\/index.html\" class=\"aligncenter\"><\/iframe><\/p>\n<p><a href=\"http:\/\/shimz.me\/example\/d3js\/behavior\/drag\/02\/index.html\">example<\/a><\/p>\n<pre class=\"lang:js decode:true \" >var svg = d3.select('svg');\r\n\r\n\/\/rect(\u56db\u89d2\u5f62)\u3092\u8ffd\u52a0\u3059\u308b\r\nvar rect = svg.append('rect')\r\n\t.attr({\r\n\t\t'width':100,\r\n\t\t'height':30,\r\n\t\t'fill': 'blue',\r\n\t\t'x':10,\r\n\t\t'y':50\r\n\t});\r\n\r\n\/\/\u30c9\u30e9\u30c3\u30b0\u30d3\u30d8\u30a4\u30d3\u30a2\u3092\u7528\u610f\t\r\nvar drag = d3.behavior.drag()\r\n    .on(\"drag\", function(d){\r\n\t\t\/\/\u30c9\u30e9\u30c3\u30b0\u3057\u305f\u8981\u7d20\u306ex,y\u5c5e\u6027\u306b\u30de\u30a6\u30b9\u5ea7\u6a19\u3092\u9069\u7528\u3055\u305b\u308b\r\n\t\td3.select(this)\r\n\t\t\t.transition()\t\/\/\u30c8\u30e9\u30f3\u30b8\u30b7\u30e7\u30f3\u3092\u8a2d\u5b9a\u3059\u308b\r\n\t\t\t.attr({\r\n\t\t\t\t'x':d3.event.x,\r\n\t\t\t\t'y':d3.event.y\r\n\t\t\t})\r\n\t});\r\n\r\n\/\/\u30c9\u30e9\u30c3\u30b0\u30d3\u30d8\u30a4\u30d3\u30a2\u3092rect\u8981\u7d20\u306b\u675f\u7e1b\u3059\u308b\t\r\nrect.call(drag);\t\t\r\n\t<\/pre>\n<p><a href=\"http:\/\/bl.ocks.org\/shimizu\/82070184834ac5f9607b\">bl.ocks.org<\/a>\u306e\u30b5\u30f3\u30d7\u30eb\u306f\u3001\u4e0a\u8a18\u30b3\u30fc\u30c9\u3092\u3061\u3087\u3063\u3068\u5f04\u3063\u305f\u3060\u3051\u3067\u3059\u3002<br \/>\n\u3053\u306e\u7528\u306b\u307b\u3093\u306e\u6570\u884c\u306e\u30b3\u30fc\u30c9\u3067\u52d5\u304d\u306b\u5909\u5316\u3092\u4ed8\u3051\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u306e\u3067\u3001\u3044\u308d\u3044\u308d\u8a66\u3057\u3066\u307f\u308b\u3068\u9762\u767d\u3044\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>example \u4e0a\u8a18\u30b5\u30f3\u30d7\u30eb\u306f\u3001circle\u8981\u7d20\u3092&hellip;<\/p>\n","protected":false},"author":1,"featured_media":4459,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-4458","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-d3-js","has-post-thumbnail-archive"],"_links":{"self":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/4458","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/comments?post=4458"}],"version-history":[{"count":0,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/4458\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/4459"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=4458"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=4458"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=4458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}