{"id":4086,"date":"2015-02-11T16:52:20","date_gmt":"2015-02-11T07:52:20","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=4086"},"modified":"2018-03-09T12:01:21","modified_gmt":"2018-03-09T03:01:21","slug":"post-4086","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/d3-js\/4086","title":{"rendered":"\u65e5\u672c\u5217\u5cf6\u3092\u56f2\u3080\u5883\u754c\u30dc\u30c3\u30af\u30b9\u56db\u9685\u306e\u7def\u5ea6\u7d4c\u5ea6\u3092\u6c42\u3081\u308b"},"content":{"rendered":"<p>\u3044\u307e\u3061\u3087\u3063\u3068\u5f04\u3063\u3066\u3044\u308b\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u3046\u95a2\u4fc2\u3067\u3001\u65e5\u672c\u5217\u5cf6\u304c\u3059\u3063\u307d\u308a\u53ce\u307e\u308bBOX\u306e\u56db\u9685\u306e\u5ea7\u6a19(\u7def\u5ea6\u7d4c\u5ea6)\u304c\u5fc5\u8981\u306b\u306a\u308a\u307e\u3057\u305f\u3002\u30b0\u30b0\u308c\u3070\u3069\u3063\u304b\u306b\u8f09\u3063\u3066\u3044\u308b\u304b\u306a\uff1f\u3000\u3068\u601d\u3063\u3066\u3044\u305f\u306e\u3067\u3059\u304c\u3001\u610f\u5916\u3068\u898b\u3064\u304b\u3089\u306a\u3044\u3002<\/p>\n<p>\u300c\u305d\u308c\u3063\u307d\u3044\u30b5\u30f3\u30d7\u30eb\u304c\u3042\u3063\u305f\uff01\u300d\u3068\u559c\u3073\u52c7\u3093\u3067\u307f\u3066\u307f\u308b\u3068\u3001\u56db\u9685\u3067\u306f\u306a\u304f\u5de6\u4e0a\u3068\u53f3\u4e0b\u306e\u5ea7\u6a19\u3057\u304b\u51fa\u3057\u3066\u304f\u308c\u306a\u304f\u3066\u304c\u3063\u304b\u308a\u3002<\/p>\n<p><script src=\"http:\/\/jsdo.it\/blogparts\/tGX0\/js?width=465&amp;height=496&amp;view=screenshot\" type=\"text\/javascript\"><\/script><\/p>\n<p>\u3057\u304b\u3082\u3001\u3088\u304f\u898b\u305f\u3089\u81ea\u5206\u304c\u305a\u3044\u3076\u3093\u524d\u306bjsdo.it\u3067\u4f5c\u6210\u3057\u3066\u3044\u305f\u3082\u306e\u3067\u3057\u305f\u3002<br \/>\n\u3082\u3046\u3001\u307b\u3093\u3068\u306a\u3093\u304b\u6b8b\u5ff5 orz<br \/>\n\u3068\u308a\u3042\u3048\u305a\u3001\u5927\u4f53\u306e\u3068\u3053\u308d\u304c\u5206\u304b\u308c\u3070\u826f\u3044\u306e\u3067\u3001D3.js\u3067\u5ea7\u6a19\u3092\u51fa\u529b\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n<h2>\u30b5\u30f3\u30d7\u30eb<\/h2>\n<p><a href=\"http:\/\/shimz.me\/example\/d3js\/geo_example3\/bounds\/japan.html\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4087 border\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2015\/02\/kyoju000017.jpg\" alt=\"\u65e5\u672c\u3000\u5883\u754c\u30dc\u30c3\u30af\u30b9\" width=\"577\" height=\"465\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2015\/02\/kyoju000017.jpg 577w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2015\/02\/kyoju000017-186x150.jpg 186w\" sizes=\"auto, (max-width: 577px) 100vw, 577px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/shimz.me\/example\/d3js\/geo_example3\/bounds\/japan.html\">example<\/a><\/p>\n<pre class=\"lang:js decode:true \">d3.json(\"..\/..\/_geodata\/japan_kanji.geojson\", function(json){\n    d3draw(json);\n});\n\nfunction d3draw(geojson) {\n    \n    var projection = d3.geo\n        .mercator()     \/\/\u6295\u5f71\u6cd5\u306e\u6307\u5b9a\n        .scale(1000)    \/\/\u30b9\u30b1\u30fc\u30eb\uff08\u30ba\u30fc\u30e0\uff09\u306e\u6307\u5b9a\n        .translate([400 , 300]) \/\/\u8868\u793a\u4f4d\u7f6e\u8abf\u6574\n        .center([139.0032936, 36.3219088]); \/\/\u4e2d\u5fc3\u306e\u5ea7\u6a19\u3092\u6307\u5b9a\n\n    var path = d3.geo.path().projection(projection);\u3000\/\/\u30d1\u30b9\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc\n    \n    \n    var svg = d3.select('svg');\n    var mg  = svg.append('g');\n    var bg  = svg.append('g');\n    \n    \/\/\u5730\u5f62\u306e\u63cf\u753b\n    var land = mg.append('path')\n        .attr({\n            \"d\": path(geojson),\n            \"stroke\": \"white\",\n            \"fill\": \"#ccc\"\n        });\n\n\n    \/\/\u5883\u754c\u60c5\u5831\u306e\u53d6\u5f97\n    var drawBounds = function(d){\n            var b = path.bounds(d);\n            return \"M\" + b[0] + \"H\" + b[1][0] + \"V\" + b[1][1] + \"H\" + b[0][0] + \"Z\";\n        }\n\n    \/\/\u5883\u754cBOX\u306e\u63cf\u753b\n    var b = path.bounds(geojson); \n    var bounds = bg.append('path')\n        .attr({\n            \"d\":  function(){  return \"M\" + b[0] + \"H\" + b[1][0] + \"V\" + b[1][1] + \"H\" + b[0][0] + \"Z\";} ,\n            \"stroke\": \"red\",\n            \"fill\": \"#ccc\",\n            \"fill-opacity\": 0\n        })\n\n        \n    \/\/\u30b3\u30fc\u30ca\u30fc\u306epixcel\u5ea7\u6a19\u30c7\u30fc\u30bf  \n    var corner = [\n        {x:b[0][0], y:b[0][1]},\n        {x:b[1][0], y:b[1][1]},\n        {x:b[0][0], y:b[1][1]},\n        {x:b[1][0], y:b[0][1]},\n    ]\n    \n    svg.selectAll(\"circle\")\n        .data(corner)\n        .enter()\n        .append(\"circle\")\n        .attr({\n            cx:function(d){ return d.x },\n            cy:function(d){ return d.y },\n            r:10\n        })\n        .append(\"title\")\n        .text(function(d){\n             return projection.invert([d.x, d.y]); \/\/pixcel\u5ea7\u6a19\u2192\u7def\u5ea6\u7d4c\u5ea6\u306b\u5909\u63db\n        });\n\n}\n<\/pre>\n<p>\u56db\u9685\u306e\u30b5\u30fc\u30af\u30eb\u306b\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u3059\u308b\u3068\u7def\u5ea6\u7d4c\u5ea6\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<br \/>\n\u30b3\u30d4\u30da\u3057\u305f\u3044\u3068\u304d\u306f\u3001Chrome\u306e\u300c\u8981\u7d20\u3092\u691c\u8a3c\u300d\u304b\u3089\u3069\u3046\u305e(\u96d1)<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4089\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2015\/02\/15021101.jpg\" alt=\"\u5ea7\u6a19\u30b3\u30d4\u30da\" width=\"558\" height=\"426\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2015\/02\/15021101.jpg 558w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2015\/02\/15021101-196x150.jpg 196w\" sizes=\"auto, (max-width: 558px) 100vw, 558px\" \/><\/p>\n<h2>\u9ad8\u5d0e\u7248\u3082\u4f5c\u3063\u3066\u307f\u305f<\/h2>\n<p><a href=\"http:\/\/shimz.me\/example\/d3js\/geo_example3\/bounds\/takasaki.html\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4088 border\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2015\/02\/kyoju000018.jpg\" alt=\"\u9ad8\u5d0e\u3000\u5883\u754c\u30dc\u30c3\u30af\u30b9\" width=\"577\" height=\"457\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2015\/02\/kyoju000018.jpg 577w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2015\/02\/kyoju000018-189x150.jpg 189w\" sizes=\"auto, (max-width: 577px) 100vw, 577px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u3044\u307e\u3061\u3087\u3063\u3068\u5f04\u3063\u3066\u3044\u308b\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u3046\u95a2\u4fc2\u3067\u3001\u65e5\u672c&hellip;<\/p>\n","protected":false},"author":1,"featured_media":4087,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-4086","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\/4086","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=4086"}],"version-history":[{"count":0,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/4086\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/4087"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=4086"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=4086"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=4086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}