{"id":2526,"date":"2013-02-03T14:28:09","date_gmt":"2013-02-03T05:28:09","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=2526"},"modified":"2017-09-15T14:01:43","modified_gmt":"2017-09-15T05:01:43","slug":"post-2526","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/d3v4\/2526","title":{"rendered":"\u3010D3.js\u3011d3.zoom\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4f7f\u3063\u3066 Pan\/Zoon \u3092\u5b9f\u88c5\u3059\u308b\u3002"},"content":{"rendered":"<p><a href=\"http:\/\/bl.ocks.org\/shimizu\/bf7f84066d10c71bd61d716500b26a31\/780a83bcf2936ec9195021d0d734443d4f05ff5c\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/02\/vboxzoom1.jpg\" alt=\"d3zoom\" width=\"498\" height=\"501\" class=\"aligncenter size-full wp-image-2527 border\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/02\/vboxzoom1.jpg 498w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/02\/vboxzoom1-150x150.jpg 150w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/02\/vboxzoom1-149x150.jpg 149w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/02\/vboxzoom1-100x100.jpg 100w\" sizes=\"auto, (max-width: 498px) 100vw, 498px\" \/><\/a><br \/>\nD3.js v4\u3067\u306fd\uff13.zoom\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u7c21\u5358\u306b\u30d1\u30f3\uff0f\u30ba\u30fc\u30e0\u3092\u5b9f\u88c5\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<pre class=\"lang:js decode:true \" >var w = 900;\r\nvar h = 500;\r\n\r\nvar data = d3.range(0, 100).map(function(d){\r\n\treturn {\"x\": ~~(Math.random() * w ), \"y\": ~~(Math.random() * h), \"r\": ~~(Math.random() * 90) + 10 };\r\n});\r\n\r\nvar svg = d3.select(\"svg\")\r\n\t.attr(\"width\", w)\r\n\t.attr(\"height\", h)\r\n\r\n\/\/\u30ba\u30fc\u30e0\u5bfe\u8c61\u3068\u3059\u308b\u30ec\u30a4\u30e4\u30fc\u3092\u751f\u6210\t\r\nvar zoomLayer  = svg.append(\"g\")\r\n\t\r\n\t\r\n\/\/\u30ab\u30e9\u30fc\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc\r\nvar color = d3.scaleOrdinal(d3.schemeCategory10);\r\n\r\n\r\n\r\n\/\/\u30b5\u30fc\u30af\u30eb\u3092\u914d\u7f6e\r\nzoomLayer.selectAll(\"circle\")\r\n\t.data(data)\r\n\t.enter()\r\n\t.append(\"circle\")\r\n\t.attr(\"cx\", function(d){ return d.x })\r\n\t.attr(\"cy\", function(d){ return d.y })\r\n\t.attr(\"r\", function(d){ return d.r })\r\n\t.attr(\"fill\", function(d,i){  return color(i) })\r\n\t.attr(\"fill-opacity\", 0.5)\r\n\t\r\n\r\n\/\/\u30ba\u30fc\u30e0\u6642\u306e\u51e6\u7406\u3092\u8a2d\u5b9a\r\nvar zoomed = function() {\r\n  zoomLayer.attr(\"transform\", d3.event.transform);\r\n}\r\n\r\n\/\/\u30ba\u30fc\u30e0\u30a4\u30d9\u30f3\u30c8\u3092svg\u8981\u7d20\u306b\u675f\u7e1b\r\nsvg.call(d3.zoom()\r\n\t.scaleExtent([1 \/ 2, 12])\r\n\t.on(\"zoom\", zoomed));\t\r\n<\/pre>\n<p><a href=\"http:\/\/bl.ocks.org\/shimizu\/bf7f84066d10c71bd61d716500b26a31\/780a83bcf2936ec9195021d0d734443d4f05ff5c\">example<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>D3.js v4\u3067\u306fd\uff13.zoom\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4f7f&hellip;<\/p>\n","protected":false},"author":1,"featured_media":2527,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[69],"tags":[],"class_list":["post-2526","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-d3v4","has-post-thumbnail-archive"],"_links":{"self":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/2526","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=2526"}],"version-history":[{"count":6,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/2526\/revisions"}],"predecessor-version":[{"id":5475,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/2526\/revisions\/5475"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/2527"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=2526"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=2526"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=2526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}