{"id":2913,"date":"2013-07-02T12:58:02","date_gmt":"2013-07-02T03:58:02","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=2913"},"modified":"2013-12-30T21:27:38","modified_gmt":"2013-12-30T12:27:38","slug":"post-2913","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/d3-js\/2913","title":{"rendered":"\u3010D3.js\u3011\u5730\u56f3\u4e0a\u306b\u90fd\u5e02\u3068\u90fd\u5e02\u3092\u7d50\u3076\u7dda\u3092\u5f15\u304f"},"content":{"rendered":"

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

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

\u90fd\u5e02\u3068\u90fd\u5e02\u3092\u7d50\u3076\u7dda\u3092\u5f15\u304f\u30b5\u30f3\u30d7\u30eb\u3067\u3059\u3002
\n\u5730\u56f3\u3092Y\u8ef8\u65b9\u5411\u306b\u56de\u8ee2\u306a\u3069\u3055\u305b\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n

\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9<\/h2>\n

\u57fa\u672c\u7684\u306b\u306f d3.geo.path().projection \u3067\u4f5c\u6210\u3057\u305f\u30d1\u30b9\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc\u306bgeoJSON\u5f62\u5f0f\u306b\u3057\u305f\u90fd\u5e02\u306e\u7def\u5ea6\u7d4c\u5ea6\u3092\u6e21\u3057\u3066\u3042\u3052\u308c\u3070\u3001\u3042\u3068\u306f\u3044\u3064\u3082\u901a\u308asvg\u306epath\u3092\u4f7f\u3063\u3066\u30e9\u30a4\u30f3\u3092\u751f\u6210\u3059\u308b\u3060\u3051\u3067\u3059\u3002
\n\u5730\u56f3\u3092\u56de\u8ee2\u3055\u305b\u305f\u308a\u3057\u3066\u3082\u5404\u8981\u7d20\u306ed\u5c5e\u6027\u3092\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u3059\u308b\u3060\u3051\u3067\u518d\u8a08\u7b97\u3057\u63cf\u753b\u3057\u3066\u304f\u308c\u308b\u306e\u3067\u4fbf\u5229\u3067\u3059\u3002<\/p>\n

d3.json("conuntries.topojson", function(json) {\n\td3main(json);\n});\n\n\nfunction d3main(json){\n\tvar width = 960;\n\tvar height = 480;\n\t\n\tvar svg = d3.select("svg")\n\t.attr("width", width)\n\t.attr("height", height);\n\n\t\/\/\u6295\u5f71\u6cd5\u8a2d\u5b9a\n\tvar projection = d3.geo.equirectangular()\n\t.scale(153)\n\t.translate([width \/ 2, height \/ 2])\n\t.rotate([-180,0,0])\n\t.precision(.1);\n\n\t\/\/\u30d1\u30b9\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc\n\tvar path = d3.geo.path().projection(projection);\n\n\t\/\/\u30b0\u30ea\u30c3\u30c9\u60c5\u5831\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc\n\tvar graticule = d3.geo.graticule();\n\n\t\/\/\u30b0\u30ea\u30c3\u30c9\u7dda\u8ffd\u52a0    \n\tvar grid = svg.append("path")\n\t\t.datum(graticule)\n\t\t.attr({\n\t\t\t"class": "graticule",\n\t\t\t"d": path,\n\t\t\t"fill": "none",\n\t\t\t"stroke": "#777",\n\t\t\t"stroke-width": ".5px",\n\t\t\t"stroke-opacity": .5\n\t\t});\n\n\t\/\/\u56fd\u571f\u8ffd\u52a0  \n\tvar land = svg.insert("path", ".graticule")\n\t\t.datum(topojson.object(json, json.objects.conuntries))\n\t\t.attr({\n\t\t\t"class": "land",\n\t\t\t"d": path,\n\t\t\t"fill": "green"\t    \n\t\t});\n    \n\t\/\/\u56fd\u5883\u7dda\u8ffd\u52a0\n\tvar boundary = svg.insert("path", ".graticule")\n\t\t.datum(topojson.object(json, json.objects.conuntries, function(a, b) { return a !== b; }))\n\t\t.attr({\n\t\t\t"class": "boundary",\n\t\t\t"d": path,\n\t\t\t"fill": "none",\n\t\t\t"stroke": "white",\n\t\t\t"stroke-width": .5\n\t\t});\n\n\t\/\/\u90fd\u5e02\u3000\u4f4d\u7f6e\u60c5\u5831\n\tvar pointdata = {"type": "LineString", "coordinates": [\n\t\t[139.69170639999993, 35.6894875], \/\/\u6771\u4eac\n\t\t[-122.41941550000001, 37.7749295], \/\/\u30b5\u30f3\u30d5\u30e9\u30f3\u30b7\u30b9\u30b3\n\t\t[149.1242241, -35.30823549999999], \/\/\u30ad\u30e3\u30f3\u30d9\u30e9\n\t\t[77.22496000000001, 28.635308], \/\/\u30cb\u30e5\u30fc\u30c7\u30ea\u30fc\n\t\t[-47.92916980000001,  -15.7801482], \/\/\u30d6\u30e9\u30b8\u30ea\u30a2\n\t\t[116.40752599999996,  39.90403], \/\/\u5317\u4eac\n\t]}\n    \n\t\/\/\u90fd\u5e02\u9593\u30e9\u30a4\u30f3\u8ffd\u52a0\n\tvar line = svg.selectAll(".line")\n\t\t.data([pointdata])\n\t\t.enter()\n\t\t.append("path")\n\t\t.attr({\n\t\t\t"class":"line",\n\t\t\t"d": path,\n\t\t\t"fill": "none",\n\t\t\t"stroke": "red",\n\t\t\t"stroke-width": 1.5\n\t\t});\n\n\t\/\/\u90fd\u5e02\u30dd\u30a4\u30f3\u30c8\u8ffd\u52a0\t    \n\tvar point = svg.selectAll(".point")\n\t\t.data(pointdata.coordinates)\n\t\t.enter()\n\t\t.append("circle")\n\t\t.attr({\n\t\t\t"cx":function(d) { return projection(d)[0]; },\n\t\t\t"cy":function(d) { return projection(d)[1]; },\n\t\t\t"r":6,\n\t\t\t"fill":"red",\n\t\t\t"fill-opacity":1\n\t\t});\n\n\t\/***Y\u8ef8\u56de\u8ee2\u3055\u305b\u308b***************************************\/\n\trotateY=0;\n\tsetInterval(function(){\n\t\t\/\/projection \u66f4\u65b0\n\t\trotateY++;\n\t\tif (rotateY >= 360) rotateY=0\n\t\tprojection.rotate([-180,rotateY,0]);\n\n\t\t\/\/\u5404\u8981\u7d20\u3092\u66f4\u65b0\n\t\tgrid.attr("d", path);\n\t\tland.attr("d", path);\n\t\tboundary.attr("d", path);\n\t\tline.attr("d", path);\t\t\n\t\tpoint.attr({\n\t\t\t"cx":function(d) {  return projection(d)[0]; },\n\t\t\t"cy":function(d) { return projection(d)[1]; },\n\t\t})\n\t},100);\t\n\t  \n}<\/pre>\n","protected":false},"excerpt":{"rendered":"
example \u90fd\u5e02\u3068\u90fd\u5e02\u3092\u7d50\u3076\u7dda\u3092\u5f15\u304f\u30b5\u30f3\u30d7\u30eb\u3067…<\/p>\n","protected":false},"author":1,"featured_media":2914,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-2913","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\/2913","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=2913"}],"version-history":[{"count":0,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/2913\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/2914"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=2913"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=2913"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=2913"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}