{"id":5481,"date":"2017-09-22T19:03:02","date_gmt":"2017-09-22T10:03:02","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=5481"},"modified":"2017-09-22T19:19:20","modified_gmt":"2017-09-22T10:19:20","slug":"d3-js-ver-4%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6google-map%e4%b8%8a%e3%81%absvg%e3%82%92%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%e3%83%ac%e3%82%a4%e3%81%99%e3%82%8b%e3%80%82","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/d3v4\/5481","title":{"rendered":"D3.js v4\u3092\u4f7f\u3063\u3066Google Map\u4e0a\u306bSVG\u3092\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u3059\u308b\u3002"},"content":{"rendered":"<h2>\u6982\u8981<\/h2>\n<p>D3.js ver.4 \u3092\u4f7f\u3063\u3066Google Map \u4e0a\u306bGeoJSON\u304b\u3089\u751f\u6210\u3057\u305f\u30dd\u30ea\u30b4\u30f3\u3092\u8868\u793a\u3057\u307e\u3059\u3002<\/p>\n<h2>\u30b5\u30f3\u30d7\u30eb<\/h2>\n<p><a href=\"https:\/\/bl.ocks.org\/shimizu\/49f963c39c11c64d6c764bc3213b3191\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2017\/09\/d3v4GoogleMapOverlay.png\" alt=\"d3v4 GoogleMap SVG Overlay\" width=\"590\" height=\"309\" class=\"aligncenter size-full wp-image-5482 border\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2017\/09\/d3v4GoogleMapOverlay.png 590w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2017\/09\/d3v4GoogleMapOverlay-286x150.png 286w\" sizes=\"auto, (max-width: 590px) 100vw, 590px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/bl.ocks.org\/shimizu\/49f963c39c11c64d6c764bc3213b3191\">example<\/a><\/p>\n<pre class=\"lang:js decode:true \" >  d3.json(\"gunma.geojson\", main);\r\n\r\n  function main(json) {\r\n\r\n    \/\/Google Map \u521d\u671f\u5316\r\n    var map = new google.maps.Map(document.getElementById('map'), {\r\n      zoom: 9,\r\n      mapTypeId: google.maps.MapTypeId.ROADMAP,\r\n      center: new google.maps.LatLng(36.53, 139.06),       \r\n    });\r\n\r\n    \/\/OverLay\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210\r\n    var overlay = new google.maps.OverlayView(); \r\n    overlay.onAdd = function () {\r\n\r\n      \/\/\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u8a2d\u5b9a\r\n      var layer = d3.select(this.getPanes().overlayLayer).append(\"div\").attr(\"class\", \"SvgOverlay\");\r\n      var svg = layer.append(\"svg\");\r\n      var gunmalayer = svg.append(\"g\").attr(\"class\", \"AdminDivisions\");\r\n      var markerOverlay = this;\r\n      var overlayProjection = markerOverlay.getProjection();\r\n\r\n      \/\/Google Projection\u4f5c\u6210\r\n      var googleMapProjection = d3.geoTransform({point: function(x, y) {\r\n        d = new google.maps.LatLng(y, x);\r\n        d = overlayProjection.fromLatLngToDivPixel(d);\r\n        this.stream.point(d.x + 4000, d.y + 4000);\r\n      }\r\n                                                });\r\n      \/\/\u30d1\u30b9\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc\u4f5c\u6210\r\n      var path = d3.geoPath().projection(googleMapProjection);\u3000\r\n\r\n      overlay.draw = function () {\r\n\r\n        \/\/\u5730\u56f3\u63cf\u304f\r\n        gunmalayer.selectAll(\"path\")\r\n          .data(json.features)\r\n          .attr(\"d\", path) \r\n          .enter().append(\"path\")\r\n          .attr(\"d\", path)\r\n          .attr(\"class\", function(d) { return \"gunma\" + d.id; });\r\n\r\n        \/\/\u8272\u5857\u308a\r\n        var grad = d3.scaleLinear().domain([0, 38]).range([\"#0000FF\", \"#FFFFFF\"]);\r\n        for(var i=0; i &lt; 36+1; i++){\r\n          d3.select(\".gunma\"+i).attr(\"fill\", grad(i));\r\n        }\r\n      };\r\n    };\r\n\r\n    \/\/\u4f5c\u6210\u3057\u305fSVG\u3092\u5730\u56f3\u306b\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u3059\u308b\r\n    overlay.setMap(map);\r\n  };<\/pre>\n<h2>\u30dd\u30a4\u30f3\u30c8<\/h2>\n<p>d3.geoTransform \u3092\u4f7f\u3063\u3066\u5730\u7406\u60c5\u5831(\u7def\u5ea6\u7d4c\u5ea6)\u3092\u3001\u753b\u9762\u4e0a\u306e\u5ea7\u6a19(\u30d4\u30af\u30bb\u30eb)\u306b\u5909\u63db\u3059\u308b\u30ab\u30b9\u30bf\u30e0\u30d7\u30ed\u30b8\u30a7\u30af\u30b7\u30e7\u30f3\u3092\u751f\u6210\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\nver.4\u3067\u306f\u3001\u30ab\u30b9\u30bf\u30e0\u30d7\u30ed\u30b8\u30a7\u30af\u30b7\u30e7\u30f3\u306f\u5fc5\u305ageo stream\u5f62\u5f0f\u3067\u5909\u63db\u5f8c\u306e\u30c7\u30fc\u30bf\u3092\u6e21\u3059\u3088\u3046\u306b\u7d71\u4e00\u3055\u308c\u307e\u3057\u305f\u3002  <\/p>\n<pre class=\"lang:js decode:true \" >var googleMapProjection = d3.geoTransform({point: function(x, y) {\r\n    d = new google.maps.LatLng(y, x);               \/\/\u5f15\u6570\u3067\u6e21\u3055\u308c\u305f\u7def\u5ea6\u7d4c\u5ea6(x,y)\u3092Google Maps API \u306eLatLng\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u5909\u63db\r\n    d = overlayProjection.fromLatLngToDivPixel(d);  \/\/LatLng\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304b\u3089\u753b\u9762\u4e0a\u306e\u5ea7\u6a19(\u30d4\u30af\u30bb\u30eb)\u3092\u53d6\u5f97\r\n    this.stream.point(d.x + 4000, d.y + 4000);      \/\/\u53d6\u5f97\u3057\u305f\u30d4\u30af\u30bb\u30eb\u5ea7\u6a19\u3092\u3001geo stream\u3068\u3057\u3066\u6e21\u3059\u3002\r\n}\r\n<\/pre>\n<p>\u6700\u5f8c\u3067\u30014000px\u3092\u52a0\u7b97\u3057\u3066\u3044\u308b\u306e\u306f\u3001svg\u30ec\u30a4\u30e4\u30fc\u3092css\u3067-4000px\u307b\u3069\u30ba\u30e9\u3057\u3066\u914d\u7f6e\u3057\u3066\u3044\u308b\u305f\u3081\u3067\u3059\u3002<\/p>\n<pre class=\"lang:css decode:true \" >  .SvgOverlay svg {\r\n    position: absolute;\r\n    top: -4000px;\r\n    left: -4000px;\r\n    width: 8000px;\r\n    height: 8000px;        \r\n  }<\/pre>\n<p>\u3053\u308c\u306f\u3001\u30de\u30c3\u30d7\u3092\u30d1\u30f3\uff0f\u30ba\u30fc\u30e0\u3057\u305f\u308a\u52d5\u304b\u3057\u305f\u308a\u3057\u305f\u969b\u306b\u30aa\u30fc\u30d0\u30ec\u30a4\u3057\u3066\u3044\u308bsvg\u8981\u7d20\u304c\u6b20\u3051\u3066\u3057\u307e\u3046\u306e\u3092\u9632\u3050\u305f\u3081\u306b\u5fc5\u8981\u306a\u51e6\u7406\u3067\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6982\u8981 D3.js ver.4 \u3092\u4f7f\u3063\u3066Google&hellip;<\/p>\n","protected":false},"author":1,"featured_media":5482,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[69],"tags":[],"class_list":["post-5481","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\/5481","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=5481"}],"version-history":[{"count":1,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/5481\/revisions"}],"predecessor-version":[{"id":5483,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/5481\/revisions\/5483"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/5482"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=5481"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=5481"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=5481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}