{"id":4211,"date":"2015-04-15T20:44:19","date_gmt":"2015-04-15T11:44:19","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=4211"},"modified":"2015-04-16T11:55:45","modified_gmt":"2015-04-16T02:55:45","slug":"post-4211","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/d3-js\/4211","title":{"rendered":"Leaflet.js\u3068D3.js\u3092\u4f7f\u3063\u3066\u624b\u66f8\u304d\u98a8\u306e\u5730\u56f3\u3092\u8868\u793a\u3059\u308b"},"content":{"rendered":"<p>\u5b9f\u7528\u6027\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u3042\u3068IE\u3067\u52d5\u304d\u307e\u305b\u3093\u3002<\/p>\n<p><a href=\"http:\/\/shimz.me\/example\/d3js\/leaflet\/handDrawing\/index.html\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2015\/04\/140415.jpg\" alt=\"\u624b\u66f8\u304d\u98a8\u5730\u56f3\" width=\"690\" height=\"464\" class=\"aligncenter size-full wp-image-4212 border\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2015\/04\/140415.jpg 690w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2015\/04\/140415-223x150.jpg 223w\" sizes=\"auto, (max-width: 690px) 100vw, 690px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/shimz.me\/example\/d3js\/leaflet\/handDrawing\/index.html\">example<\/a><\/p>\n<p>\u30b9\u30e9\u30a4\u30c0\u30fc\u3092\u53f3\u306b\u79fb\u52d5\u3059\u308b\u3068\u3001\u5730\u56f3\u304c\u3069\u3093\u3069\u3093\u9177\u304f\u306a\u308a\u307e\u3059\u3002<br \/>\n\u5de6\u4e0a\u306e\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u3067\u300c\u3042\u306a\u308d\u3050\u98a8\u300d\u3068\u300c\u3067\u3058\u305f\u308b\u98a8\u300d\u3092\u5207\u308a\u66ff\u3048\u3089\u308c\u307e\u3059\u3002<\/p>\n<h2>\u30b5\u30f3\u30d7\u30eb<\/h2>\n<pre class=\"lang:js decode:true \" >\tvar range = document.querySelector('.range');\r\n\t\r\n\t\/\/Leaflet\u521d\u671f\u8a2d\u5b9a\t\r\n\tvar map = L.map('map', {\r\n\t\tcenter: [39.702053\u3000, 141.15448379999998],\r\n\t\tzoom: 6,\r\n\t\tzoomControl: false\r\n\t});\t\r\n\tnew L.Control.Zoom({ position: 'bottomright' }).addTo(map);\r\n\t\r\n\t\/\/Leaflet\u306b\u7528\u610f\u3055\u308c\u305fsvg\u3092\u4f7f\u3046 \r\n\tmap._initPathRoot();\t\r\n\t\t\r\n\t\/\/ svg\u8981\u7d20\u3092\u9078\u629e\r\n\tvar svg = d3.select(\"#map\").select(\"svg\");\r\n\tvar g = svg.append(\"g\");\r\n\r\n\t\r\n\t\/\/\u7def\u5ea6\u7d4c\u5ea6->\u30d1\u30b9\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc\u95a2\u6570\u4f5c\u6210\r\n\tvar transform = d3.geo.transform({point: projectPoint});\r\n\tvar path = d3.geo.path().projection(transform);\r\n \r\n\t\/\/\u5730\u5f62\u306epath\u8981\u7d20(\u900f\u660e)\u3092\u8ffd\u52a0\u2192\u30d9\u30fc\u30b9\u30de\u30c3\u30d7\u3068\u3059\u308b\r\n\tvar basemap = g.selectAll(\".base\")\r\n\t\t.data(geojson.features)\r\n\t\t.enter()\r\n\t\t.append(\"path\")\r\n\t\t.attr({\r\n\t\t\t\"class\":function(d, i){ return \"base No\" + i },\r\n\t\t\t\"stroke\": \"red\",\r\n\t\t\t\"fill\": \"none\",\r\n\t\t\t\"stroke-opacity\": 0\r\n\t\t});\r\n\r\n\tmap.on(\"viewreset\", update);\r\n\r\n\tupdate();\r\n\r\n\r\n\tfunction update() {\r\n\t\t\/\/\u30d9\u30fc\u30b9\u30de\u30c3\u30d7(\u900f\u660e)\u3092\u30a2\u30c3\u30d7\u30c7\u30fc\u3068\r\n\t\tbasemap.attr(\"d\", path);\r\n\t\t\r\n\t\t\/\/\u624b\u66f8\u304d\u98a8\u30de\u30c3\u30d7\u3092\u524a\u9664\r\n\t\td3.selectAll(\".handDrawingGroup\").remove();\r\n\t\t\r\n\t\t\/\/\u30d9\u30fc\u30b9\u30de\u30c3\u30d7\u304b\u3089path\u8981\u7d20\u306ed\u5c5e\u6027\u306e\u5024\u3092\u62bd\u51fa\u2192\u914d\u5217\u5316\u3059\u308b\r\n\t\tvar basePathArray =Array.apply(null, document.querySelectorAll(\".base\"))\r\n\t\t\t.map(function(p){ return d3.select(p).attr(\"d\").split(\"M\").filter(function(P, i){\r\n\t\t\t\treturn i != 0;\r\n\t\t\t}).map(function(p){\r\n\t\t\t\treturn\tp.replace(\/Z\/g, \"\").split(\"L\").map(function(s){ return s.split(\",\") })  })\r\n\t\t\t});\r\n\t\t\r\n\t\t\/\/\u88dc\u5b8c\u65b9\u6cd5\u3092\u9078\u629e(basis or step-before)\r\n\t\tvar writetype = document.querySelector('[name=\"writetype\"]:checked').value;\r\n\t\t\/\/\u30d1\u30b9\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc\u3092\u751f\u6210\r\n\t\tvar countryDraw = d3.svg.line().x(function(d){ return d[0]}).y(function(d){return d[1]})\r\n\t\t\t.interpolate(writetype);\t\r\n\t\t\r\n\t\t\/\/\u5404\u624b\u66f8\u304d\u98a8path\u306e\u89aa\u8981\u7d20\t\r\n\t\tvar hw = svg.selectAll(\".handDrawingGroup\")\r\n\t\t\t.data(basePathArray)\r\n\t\t\t.enter()\r\n\t\t\t.append(\"g\")\r\n\t\t\t.attr(\"class\", \"handDrawingGroup\")\r\n\t\t\r\n\t\t\/\/\u624b\u66f8\u304d\u98a8\u5730\u56f3\u3092\u63cf\u753b\u3059\u308b\t\r\n\t\thw.selectAll(\"handDrawingPath\")\r\n\t\t\t.data(function(d){ return d})\r\n\t\t\t.enter()\r\n\t\t\t.append(\"path\")\r\n\t\t\t.attr({\r\n\t\t\t\t\"class\":\"handDrawingPath\",\r\n\t\t\t\t\"stroke\":\"black\",\r\n\t\t\t\t\"stroke-width\":2,\r\n\t\t\t\t\"fill\": \"none\",\r\n\t\t\t\td:function(d){return countryDraw(d) + \"Z\";  }\r\n\t\t\t})\r\n\t\t\t\t\r\n\t\t\r\n\t} \r\n\r\n\t\/\/\u7def\u5ea6\u2192\u5ea7\u6a19\u5909\u63db\r\n\tfunction projectPoint(x, y) {\t\t\r\n\t\tvar point = map.latLngToLayerPoint(new L.LatLng(y, x));\r\n\t\t\/\/\u5ea7\u6a19\u306b\u30e9\u30f3\u30c0\u30e0\u306b\u30ce\u30a4\u30ba\u3092\u52a0\u3048\u308b\r\n\t\tvar pointX = (point.x + Math.random() * range.value - range.value \/2);\r\n\t\tvar pointY = (point.y + Math.random() * range.value - range.value \/2);\r\n\t\tthis.stream.point(pointX, pointY);\r\n\t}\r\n\r\n\t\/\/\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\r\n\trange['oninput' in range ? 'oninput' : 'onchange'] = update;\r\n\td3.selectAll(\".type\").on(\"click\", update); <\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u5b9f\u7528\u6027\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u3042\u3068IE\u3067\u52d5\u304d\u307e\u305b\u3093\u3002 exa&hellip;<\/p>\n","protected":false},"author":1,"featured_media":4212,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,55],"tags":[],"class_list":["post-4211","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\/4211","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=4211"}],"version-history":[{"count":1,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/4211\/revisions"}],"predecessor-version":[{"id":4213,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/4211\/revisions\/4213"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/4212"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=4211"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=4211"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=4211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}