{"id":3521,"date":"2014-05-15T10:19:32","date_gmt":"2014-05-15T01:19:32","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=3521"},"modified":"2017-03-14T12:15:30","modified_gmt":"2017-03-14T03:15:30","slug":"post-3521","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/d3-js\/3521","title":{"rendered":"\u3010D3.js\u3011\u5730\u56f3\u4e0a\u306b\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u3057\u305fSVG\u8981\u7d20\u306b\u30c9\u30ed\u30c3\u30d7\u30b7\u30e3\u30c9\u30a6\u3092\u4ed8\u3051\u308b"},"content":{"rendered":"<p><a href=\"https:\/\/gunmagisgeek.com\/blog\/d3-js\/3517\">\u6628\u65e5\u306e\u8a18\u4e8b<\/a>\u3067Leaflet\u3067\u4f5c\u6210\u3057\u305f\u5730\u56f3\u4e0a\u306bSVG\u3092\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u3057\u307e\u3057\u305f\u304c\u3001\u5730\u56f3\u30bf\u30a4\u30eb\u3068\u306e\u76f8\u6027\u306b\u3088\u3063\u3066\u306f\u4e0a\u306b\u91cd\u306d\u305fSVG\u8981\u7d20\u304c\u5206\u304b\u308a\u3065\u3089\u3044\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002<br \/>\n\u305d\u3053\u3067\u3001SVG\u306efilter\u6a5f\u80fd\u3092\u7528\u3044\u3066\u30c9\u30ed\u30c3\u30d7\u30b7\u30e3\u30c9\u30a6\u30a8\u30d5\u30a7\u30af\u30c8\u3092\u304b\u3051\u308b\u3053\u3068\u3067\u3001\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u3057\u305f\u8981\u7d20\u3092\u76ee\u7acb\u305f\u305b\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n<h2>\u6bd4\u8f03<\/h2>\n<p>\u30ce\u30fc\u30de\u30eb<br \/>\n<iframe loading=\"lazy\" width=\"100%\" height=\"300\" scrolling=\"no\" src=\"\/\/shimz.me\/example\/d3js\/leaflet\/polygon\/\"><\/iframe><\/p>\n<p>\u30c9\u30ed\u30c3\u30d7\u30b7\u30e3\u30c9\u30a6\u4ed8\u52a0<br \/>\n<iframe loading=\"lazy\" width=\"100%\" height=\"300\" scrolling=\"no\" src=\"\/\/shimz.me\/example\/d3js\/leaflet\/polygon\/shadow.html\"><\/iframe><\/p>\n<h2>\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9<\/h2>\n<pre class=\"lang:js mark:16-46,59 decode:true \" >\r\n\/\/Leaflet\u521d\u671f\u8a2d\u5b9a\r\nvar map = L.map('map').setView([39.702053\u3000, 141.15448379999998], 5);\r\nvar mapLink = '&lt;a target=\"_blank\" href=\"http:\/\/portal.cyberjapan.jp\/help\/termsofuse.html\"&gt;\u56fd\u571f\u5730\u7406\u9662 \u5730\u7406\u9662\u5730\u56f3 \u6a19\u6e96\u5730\u56f3&lt;\/a&gt;';\r\n\r\n\/\/Tile Map Service\u306e\u6307\u5b9a\r\nL.tileLayer(\r\n\t\t'http:\/\/cyberjapandata.gsi.go.jp\/xyz\/std\/{z}\/{x}\/{y}.png', {\r\n\t\tattribution: '&amp;copy; ' + mapLink + ' Contributors',\r\n\t\tmaxZoom: 18,\r\n\t}).addTo(map);\r\n\r\n\t\r\n\/\/ Leaflet\u306eoverlay pane\u306bsvg\u8981\u7d20\u3092\u8ffd\u52a0\r\nvar svg = d3.select(map.getPanes().overlayPane).append(\"svg\");\r\n\r\n\/\/\u30d5\u30a3\u30eb\u30bf\u30fc\u8981\u7d20\u306e\u8ffd\u52a0\r\nvar filter = svg.append(\"defs\").append('filter')\r\n\t.attr({\r\n\t\t\"id\": \"drop-shadow\",\r\n\t\t\"width\": \"150%\",\r\n\t\t\"height\": \"150%\"\r\n\t});\r\n\r\n\/\/\u30ac\u30a6\u30b9(\u307c\u304b\u3057)\u30d5\u30a3\u30eb\u30bf\u30fc\u3092\u8ffd\u52a0\r\nfilter.append('feGaussianBlur')\r\n\t.attr({\r\n\t\t\"in\": \"SourceAlpha\",\r\n\t\t\"result\": \"blur\",\r\n\t\t\"stdDeviation\": \"2\"\r\n\t});\r\n\r\n\/\/\u5e73\u9762\u79fb\u52d5\u30d5\u30a3\u30eb\u30bf\u30fc\u3092\u8ffd\u52a0\r\nfilter.append('feOffset')\r\n\t.attr({\r\n\t\t\"result\": \"offsetBlur\",\r\n\t\t\"dx\": 4,\r\n\t\t\"dy\": 4\r\n\t})\r\n\r\n\/\/\u4e0a\u8a18\uff12\u3064\u306e\u30a8\u30d5\u30a7\u30af\u30c8\u3092\u30d6\u30ec\u30f3\u30c9(\u30de\u30fc\u30b8)\u3059\u308b\u30d5\u30a3\u30eb\u30bf\u30fc\u3092\u8ffd\u52a0\r\nfilter.append('feBlend')\r\n\t.attr({\r\n\t\t\"in\": \"SourceGraphic\",\r\n\t\t\"in2\": \"offsetBlur\",\r\n\t\t\"mode\": \"normal\"\r\n\t});\r\n\t\r\nvar g = svg.append(\"g\").attr(\"class\", \"leaflet-zoom-hide\");\r\n\r\nd3.json(\"ken.geojson\", function(geojson) {\r\n  \r\n\tvar transform = d3.geo.transform({point: projectPoint});\r\n\tvar path = d3.geo.path().projection(transform);\r\n \r\n\td3_features = g.selectAll(\"path\")\r\n\t\t.data(geojson.features)\r\n\t\t.enter()\r\n\t\t.append(\"path\")\r\n\t\t.attr(\"filter\", \"url(#drop-shadow)\"); \/\/svg filter\u3092\u6307\u5b9a\r\n\r\n\tmap.on(\"viewreset\", update);\r\n\r\n\tupdate();\r\n\r\n\t\/\/SVG\u8981\u7d20\u3092leaflet\u306e\u30de\u30c3\u30d7\u30ec\u30a4\u30e4\u30fc\u306b\u30d5\u30a3\u30c3\u30c8\u3055\u305b\u308b\r\n\tfunction update() {\r\n\t\t\r\n\t\tvar bounds = path.bounds(geojson);\r\n\t\r\n\t\tvar topLeft = bounds[0];\r\n\t\tvar bottomRight = bounds[1];\r\n\t\r\n\t\tsvg .attr({\r\n\t\t\t\t\"width\": bottomRight[0] - topLeft[0],\r\n\t\t\t\t\"height\": bottomRight[1] - topLeft[1]\r\n\t\t\t})\r\n\t\t\t.style({\r\n\t\t\t\t\"left\": topLeft[0] + \"px\",\r\n\t\t\t\t\"top\": topLeft[1] + \"px\"\r\n\t\t\t})\r\n\t\r\n\t\tg .attr(\"transform\", \"translate(\" + -topLeft[0] + \",\" + -topLeft[1] + \")\");\r\n\t\r\n\t\t\/\/ path\u8981\u7d20\uff08\u5730\u5f62)\u8ffd\u52a0 \r\n\t\td3_features.attr(\"d\", path)\r\n\t\t\t.attr({\r\n\t\t\t\t\"fill-opacity\": 0.4,\r\n\t\t\t\t\"fill\": \"green\",\r\n\t\t\t\t\"stroke\": \"red\"\r\n\t\t\t});\r\n\t} \r\n\r\n\t\/\/\u4f4d\u7f6e\u2192\u5ea7\u6a19\u5909\u63db\r\n\tfunction projectPoint(x, y) {\r\n\t\tvar point = map.latLngToLayerPoint(new L.LatLng(y, x));\r\n\t\tthis.stream.point(point.x, point.y);\r\n\t}\r\n\r\n})\r\n <\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u6628\u65e5\u306e\u8a18\u4e8b\u3067Leaflet\u3067\u4f5c\u6210\u3057\u305f\u5730\u56f3\u4e0a\u306bSVG&hellip;<\/p>\n","protected":false},"author":1,"featured_media":3522,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,55],"tags":[],"class_list":["post-3521","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-d3-js","category-leaflet-js","has-post-thumbnail-archive"],"_links":{"self":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/3521","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=3521"}],"version-history":[{"count":0,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/3521\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/3522"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=3521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=3521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=3521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}