{"id":2351,"date":"2013-01-21T14:40:38","date_gmt":"2013-01-21T05:40:38","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=2351"},"modified":"2017-09-15T13:35:12","modified_gmt":"2017-09-15T04:35:12","slug":"post-2351","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/d3v4\/2351","title":{"rendered":"\u3010D3.js\u3011D3.js\u3092\u4f7f\u3063\u3066SVG\u3067\u5730\u56f3\u3092\u63cf\u304f"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/01\/tsuru_gunma.jpg\" alt=\"tsuru_gunma\" width=\"375\" height=\"320\" class=\"aligncenter size-full wp-image-2640 border\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/01\/tsuru_gunma.jpg 375w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/01\/tsuru_gunma-176x150.jpg 176w\" sizes=\"auto, (max-width: 375px) 100vw, 375px\" \/><\/p>\n<p>D3.js ver.4\u3092\u4f7f\u3063\u3066SVG\u3067\u5730\u56f3\u306e\u4f5c\u6210\u3092\u304a\u3053\u306a\u3044\u307e\u3059\u3002<\/p>\n<h2>\u30c7\u30fc\u30bf\u306e\u4f5c\u6210<\/h2>\n<p>\u5730\u56f3\u306e\u5143\u3068\u306a\u308b\u30c7\u30fc\u30bf\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<br \/>\n<a href=\"http:\/\/nlftp.mlit.go.jp\/ksj\/\">\u56fd\u571f\u6570\u5024\u60c5\u5831\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u30b5\u30fc\u30d3\u30b9<\/a>\u304b\u3089\u7fa4\u99ac\u770c\u306e<a href=\"http:\/\/nlftp.mlit.go.jp\/ksj\/gml\/datalist\/KsjTmplt-N03.html\">\u884c\u653f\u533a\u57df\u30c7\u30fc\u30bf<\/a>\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u307e\u3059\u3002<br \/>\n\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u305f\u30d5\u30a1\u30a4\u30eb\u306e\u4e2d\u304b\u3089\u3001shp\u30d5\u30a1\u30a4\u30eb\u3092<a href=\"http:\/\/qgis.org\/ja\/site\/\">QIS<\/a>\u306b\u8aad\u307f\u8fbc\u307e\u305b\u3066GeoJSON\u306b\u5909\u63db\u3002<br \/>\n\u300c\u30ec\u30a4\u30e4\u30fc\u300d\u2192\u300c\u540d\u524d\u3092\u3064\u3051\u3066\u4fdd\u5b58\u300d\u2192 GeoJSON\u5f62\u5f0f\u3067\u4fdd\u5b58\u3002<\/p>\n<h2>\u5730\u56f3\u306e\u8868\u793a<\/h2>\n<p>\u30fbd3.js\u306e\u8aad\u307f\u8fbc\u307f<\/p>\n<pre class=\"lang:xhtml decode:true \" >&lt;script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/d3\/4.3.0\/d3.min.js\"&gt;&lt;\/script&gt;    <\/pre>\n<p>\u30fbgeojson\u30c7\u30fc\u30bf\u3092\u8aad\u307f\u8fbc\u307fsvg\u3068\u3057\u3066\u51fa\u529b\u3059\u308b\u30b9\u30af\u30ea\u30d7\u30c8<\/p>\n<pre class=\"lang:js decode:true \" >\/\/\u30d7\u30ed\u30b8\u30a7\u30af\u30b7\u30e7\u30f3\u8a2d\u5b9a\t\r\nvar projection = d3\r\n\t.geoMercator() \/\/\u6295\u5f71\u6cd5\u306e\u6307\u5b9a\r\n\t.scale(16000)\t\/\/\u30b9\u30b1\u30fc\u30eb\uff08\u30ba\u30fc\u30e0\uff09\u306e\u6307\u5b9a\r\n\t.rotate([-0.25, 0.25, 0]) \/\/\u5730\u56f3\u3092\u56de\u8ee2\u3059\u308b\u3000[x,y,z]\r\n\t.center([139.0032936, 36.3219088]); \/\/\u4e2d\u5fc3\u306e\u5ea7\u6a19\u3092\u6307\u5b9a\r\n\r\n\/\/\u30d1\u30b9\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc\u751f\u6210\r\nvar path = d3.geoPath().projection(projection);\u3000\r\n\r\n\/\/\u5730\u56f3\u7528\u306e\u30b9\u30c6\u30fc\u30b8(SVG\u30bf\u30b0)\u3092\u4f5c\u6210\r\nvar map = d3.select(\"body\")\r\n\t.append(\"svg\")\r\n\t.attr(\"width\", 960)\r\n\t.attr(\"height\", 500); \r\n\r\n\r\n\/\/\u5730\u7406\u30c7\u30fc\u30bf\u8aad\u307f\u8fbc\u307f\r\nd3.json(\"gunma.geojson\", drawMaps);\r\n\r\n\/\/\u5730\u56f3\u3092\u63cf\u753b\r\nfunction drawMaps(geojson) {\r\n\tmap.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(\"d\", path)  \/\/\u30d1\u30b9\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc\u3092\u4f7f\u3063\u3066d\u5c5e\u6027\u306e\u5024\u3092\u751f\u6210\u3057\u3066\u3044\u308b\r\n\t\t.attr(\"fill\", \"green\")\r\n\t\t.attr(\"fill-opacity\", 0.5)\r\n\t\t.attr(\"stroke\", \"#222\");    \r\n}\r\n<\/pre>\n<p><a href=\"https:\/\/bl.ocks.org\/shimizu\/61e271a44f9fb832b272417c0bc853a5\">example<\/a><\/p>\n<h2>TopoJSON\u3092\u4f7f\u3046<\/h2>\n<p>GeoJSON\u3092TopoJSON\u306b\u5909\u63db\u3059\u308b\u3053\u3068\u3067\u3001\u30c7\u30fc\u30bf\u30bb\u30c3\u30c8\u306e\u30d5\u30a1\u30a4\u30eb\u30b5\u30a4\u30ba\u3092\u5c0f\u3055\u304f\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u30fbTopoJSON\u5909\u63db\u7528\u306e\u30c4\u30fc\u30eb\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/p>\n<pre class=\"lang:sh decode:true \" >npm install -g topojson\r\n<\/pre>\n<p>\u30fbGeoJSON\u3092TopoJSON\u3078\u5909\u63db<\/p>\n<pre class=\"lang:sh decode:true \" >topojson -o gunma.topojson gunma.geojson\r\n<\/pre>\n<p>\u30fbTopoJSON\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u8aad\u307f\u8fbc\u307f\u3002<\/p>\n<pre class=\"lang:xhtml decode:true \" >&lt;script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/topojson\/3.0.0\/topojson.min.js\"&gt;&lt;\/script&gt;    <\/pre>\n<p>\u30fbgeojson\u30c7\u30fc\u30bf\u3092\u8aad\u307f\u8fbc\u307fsvg\u3068\u3057\u3066\u51fa\u529b\u3059\u308b\u30b9\u30af\u30ea\u30d7\u30c8<\/p>\n<pre class=\"lang:js decode:true \" >\/\/\u30d7\u30ed\u30b8\u30a7\u30af\u30b7\u30e7\u30f3\u8a2d\u5b9a\t\r\nvar projection = d3\r\n\t.geoMercator() \/\/\u6295\u5f71\u6cd5\u306e\u6307\u5b9a\r\n\t.scale(16000)\t\/\/\u30b9\u30b1\u30fc\u30eb\uff08\u30ba\u30fc\u30e0\uff09\u306e\u6307\u5b9a\r\n\t.rotate([-0.25, 0.25, 0]) \/\/\u5730\u56f3\u3092\u56de\u8ee2\u3059\u308b\u3000[x,y,z]\r\n\t.center([139.0032936, 36.3219088]); \/\/\u4e2d\u5fc3\u306e\u5ea7\u6a19\u3092\u6307\u5b9a\r\n\r\n\/\/\u30d1\u30b9\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc\u751f\u6210\r\nvar path = d3.geoPath().projection(projection);\u3000\r\n\r\n\/\/\u5730\u56f3\u7528\u306e\u30b9\u30c6\u30fc\u30b8(SVG\u30bf\u30b0)\u3092\u4f5c\u6210\r\nvar map = d3.select(\"body\")\r\n\t.append(\"svg\")\r\n\t.attr(\"width\", 960)\r\n\t.attr(\"height\", 500); \r\n\r\n\r\n\/\/\u5730\u7406\u30c7\u30fc\u30bf\u8aad\u307f\u8fbc\u307f\r\nd3.json(\"gunma.topojson\", drawMaps);\r\n\r\n\/\/topojson\u3092geojson\u306b\u623b\u3059\r\nfunction convertGeoJSON(topo) {\r\n    return topojson.feature(topo, topo.objects.gunma);\r\n}\r\n\r\n\/\/\u5730\u56f3\u3092\u63cf\u753b\r\nfunction drawMaps(topo) {\r\n\tvar geojson = convertGeoJSON(topo);\r\n\t\r\n\tmap.append(\"svg:g\")\r\n\t\t.attr(\"class\", \"gunma\")\r\n\t\t.selectAll(\"path\")\r\n\t\t.data(geojson.features)\r\n\t\t.enter()\r\n\t\t.append(\"svg:path\")\r\n\t\t.attr(\"d\", path)  \/\/data\u306b\u6295\u5f71\u6cd5\u3092\u9069\u5fdc\r\n\t\t.attr(\"fill-opacity\", 0.5)\r\n\t\t.attr(\"fill\", \"green\")\r\n\t\t.attr(\"stroke\", \"#222\");    \r\n}<\/pre>\n<p><a href=\"https:\/\/bl.ocks.org\/shimizu\/fc2e1fdd870987785aa55242a4bfefe2\/4b7854de0d820d209c5e397c689e113c1a466de5\">example<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>D3.js ver.4\u3092\u4f7f\u3063\u3066SVG\u3067\u5730\u56f3\u306e\u4f5c\u6210\u3092&hellip;<\/p>\n","protected":false},"author":1,"featured_media":2640,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[69],"tags":[],"class_list":["post-2351","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\/2351","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=2351"}],"version-history":[{"count":13,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/2351\/revisions"}],"predecessor-version":[{"id":2367,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/2351\/revisions\/2367"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/2640"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=2351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=2351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=2351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}