{"id":3025,"date":"2013-08-30T10:30:57","date_gmt":"2013-08-30T01:30:57","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=3025"},"modified":"2013-12-30T21:50:01","modified_gmt":"2013-12-30T12:50:01","slug":"post-3025","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/d3-js\/3025","title":{"rendered":"\u3010D3.js\u3011\u30d9\u30af\u30bf\u30fc\u5730\u56f3\u306e\u30d1\u30f3\uff0f\u30ba\u30fc\u30e0\uff06\u79fb\u52d5"},"content":{"rendered":"<p><a href=\"http:\/\/shimz.me\/example\/d3js\/geo_template\/zoom\/\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/08\/mapzoom130830.jpg\" alt=\"mapzoom130830\" width=\"590\" height=\"600\" class=\"alignleft size-full wp-image-3028\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/08\/mapzoom130830.jpg 590w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/08\/mapzoom130830-148x150.jpg 148w\" sizes=\"auto, (max-width: 590px) 100vw, 590px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/shimz.me\/example\/d3js\/geo_template\/zoom\/\">example<\/a><\/p>\n<p>D3.js\u3067\u8868\u793a\u3057\u305f\u5730\u56f3\u306e\u30d1\u30f3\uff0f\u30ba\u30fc\u30e0\uff06\u79fb\u52d5\u30b5\u30f3\u30d7\u30eb\u3067\u3059\u3002<\/p>\n<h2>\u30b5\u30f3\u30d7\u30eb<\/h2>\n<pre class=\"lang:js decode:true \" >d3.json(&quot;japan.topojson&quot;, function(json) {\n    d3main(json);\n});\n\n\nfunction d3main(json){\n    var scale = 1500;\n    var geodata = topojson.object(json, json.objects.japan).geometries;\n\n    projection = d3.geo\n        .mercator()\t\t\/\/\u6295\u5f71\u6cd5\u306e\u6307\u5b9a\n        .scale(scale)\t\/\/\u30b9\u30b1\u30fc\u30eb\uff08\u30ba\u30fc\u30e0\uff09\u306e\u6307\u5b9a\n        .translate([300,350])\n        .center([139.0032936, 36.3219088]); \/\/\u4e2d\u5fc3\u306e\u5ea7\u6a19\u3092\u6307\u5b9a\n\n    var path = d3.geo.path().projection(projection);\u3000\/\/\u6295\u5f71\n\n    var svg = d3.select(&quot;svg&quot;);\n\n    \/\/\u5730\u56f3\u3092\u63cf\u753b\n    var map =  svg.append(&quot;svg:g&quot;)\n        .selectAll(&quot;path&quot;)\n        .data(geodata)\n        .enter()\n        .append(&quot;svg:path&quot;)\n        .attr({\n            &quot;d&quot;: D(path),\n            &quot;fill&quot;: &quot;green&quot;,\n            &quot;fill-opacity&quot;: 0.5,\n            &quot;stroke&quot;: &quot;black&quot;\n        });\n        \n    \/\/\u30ba\u30fc\u30e0\u30a4\u30d9\u30f3\u30c8\u8a2d\u5b9a    \n    var zoom = d3.behavior.zoom().on('zoom', function(){\n       projection.scale(scale * d3.event.scale);       \n       map.attr('d', path)       \n    });\n    svg.call(zoom);\n\n    \/\/\u30c9\u30e9\u30c3\u30b0\u30a4\u30d9\u30f3\u30c8\u8a2d\u5b9a\n    drag = d3.behavior.drag().on('drag', function(){\n       var tl = projection.translate();\n       projection.translate([tl[0] + d3.event.dx, tl[1] + d3.event.dy]);\n       map.attr('d', path);\n    });\n    svg.call(drag);\n        \n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>example D3.js\u3067\u8868\u793a\u3057\u305f\u5730\u56f3\u306e\u30d1\u30f3\uff0f\u30ba&hellip;<\/p>\n","protected":false},"author":1,"featured_media":3028,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-3025","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\/3025","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=3025"}],"version-history":[{"count":0,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/3025\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/3028"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=3025"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=3025"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=3025"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}