{"id":3019,"date":"2013-08-29T11:09:44","date_gmt":"2013-08-29T02:09:44","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=3019"},"modified":"2013-12-30T21:49:51","modified_gmt":"2013-12-30T12:49:51","slug":"post-3019","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/d3-js\/3019","title":{"rendered":"\u3010D3.js\u3011MapBox\u304b\u3089\u53d6\u5f97\u3057\u305f\u5730\u56f3\u753b\u50cf(\u30e9\u30b9\u30bf\u30bf\u30a4\u30eb)\u3092SVG\u306eClipPath\u3067\u304f\u308a\u629c\u304f"},"content":{"rendered":"

\"d3geotilsep1\"<\/a><\/p>\n

example<\/a><\/p>\n

MapBox<\/a>\u304b\u3089\u53d6\u5f97\u3057\u305f\u5730\u56f3\u753b\u50cf\u3092topojson\u3067\u8aad\u307f\u8fbc\u3093\u3060\u65e5\u672c\u5730\u56f3(svg:path)\u3067\u304f\u308a\u629c\u304d\u307e\u3059\u3002
\n\"d3geotilsep4\"<\/p>\n

\u30b5\u30f3\u30d7\u30eb<\/h2>\n

D3\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u307b\u304b\u306btopojson\u30d7\u30e9\u30b0\u30a4\u30f3\u3068\u3001d3.geo.tile\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u8aad\u307f\u8fbc\u307f\u307e\u3059\u3002<\/p>\n

<script src="http:\/\/d3js.org\/d3.v3.min.js"><\/script>\n<script src="http:\/\/d3js.org\/d3.geo.tile.v0.min.js"><\/script>\n<script src="http:\/\/d3js.org\/topojson.v1.min.js"><\/script>\n<\/pre>\n
d3.json("japan.topojson", function(topology) {\n\td3main(topology);\n});\n\n\nfunction d3main(topology){\n\n\tvar svg = d3.select("svg");\n\n\n\tvar projection = d3.geo.mercator()\n\t\t.center([141.15448379999998,39.702053])\n\t\t.scale(1300);\n\n\t\/\/\u30d1\u30b9\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc\n\tvar path = d3.geo.path().projection(projection);\n\n\t\/\/\u53c2\u7167\u7528\u306edefs\u8981\u7d20\u3092\u8ffd\u52a0\n\t var defs = svg.append("defs");\n\n\t\/\/defs\u8981\u7d20\u5185\u306b\u65e5\u672c\u5730\u56f3\u306epath\u3092\u8a18\u8ff0\n\tvar land = defs.append("path")\n\t.datum(topojson.feature(topology, topology.objects.japan))\n\t.attr({\n\t\t"id": "land",\n\t\t"d": path\n\t});\n\n\t\/\/\u65e5\u672c\u5730\u56f3\u306e\u30d1\u30b9\u3092clipPath\u3068\u3057\u3066\u767b\u9332\n\tvar clipPath = defs.append("clipPath")\n\t.attr("id", "clip")\n\t.append("use")\n\t.attr("xlink:href", "#land");\n\t\n\t\n\t\/\/\u30bf\u30a4\u30eb\u5ea7\u6a19\u751f\u6210\u95a2\u6570\n\t var tile  = d3.geo.tile()\n\t.scale(projection.scale() * 2 * Math.PI)\n\t.translate(projection([0, 0]))\n\t.zoomDelta((window.devicePixelRatio || 1) - .5);\n\n\t\/\/\u30bf\u30a4\u30eb\u5ea7\u6a19\u30c7\u30fc\u30bf\u751f\u6210\n\tvar tiles = tile();\n\n\n\t\/\/\u30e9\u30b9\u30bf\u30bf\u30a4\u30eb\u3092\u8ffd\u52a0\u3059\u308b\u30b0\u30fc\u30eb\u30fc\u30d7\u3092\u751f\u6210\n\tvar img  =    svg.append("g")\n\t.attr({\n\t\t"clip-path": "url(#clip)", \/\/\u30af\u30ea\u30c3\u30d7\u30d1\u30b9\u3092\u6307\u5b9a\n\t\t"transform": "translate("+[0, 0]+")"\n\t});\n\n\t\/\/\u30e9\u30b9\u30bf\u30bf\u30a4\u30eb\u3092image\u8981\u7d20\u3068\u3057\u3066\u8ffd\u52a0\n\timg.selectAll("image")\n\t.data(tiles) \/\/\u30bf\u30a4\u30eb\u5ea7\u6a19\u30c7\u30fc\u30bf\u3092\u6307\u5b9a\n\t.enter()\n\t.append("image")\n\t.attr({\n\t\t"xlink:href": function(d){\n\t\t\treturn "http:\/\/" + ["a", "b", "c", "d"][Math.random() * 4 | 0] + ".tiles.mapbox.com\/v3\/mapbox.natural-earth-2\/" + d[2] + "\/" + d[0] + "\/" + d[1] + ".png"; \n\t\t},\n\t\t"width": Math.round(tiles.scale),\n\t\t"height": Math.round(tiles.scale),\n\t\t"x": function(d) { return Math.round((d[0] + tiles.translate[0]) * tiles.scale); },\n\t\t"y": function(d) { return Math.round((d[1] + tiles.translate[1]) * tiles.scale); }\n\t});\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"
example MapBox\u304b\u3089\u53d6\u5f97\u3057\u305f\u5730\u56f3\u753b\u50cf\u3092…<\/p>\n","protected":false},"author":1,"featured_media":3020,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-3019","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\/3019","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=3019"}],"version-history":[{"count":0,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/3019\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/3020"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=3019"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=3019"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=3019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}