{"id":2930,"date":"2013-07-11T09:24:12","date_gmt":"2013-07-11T00:24:12","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=2930"},"modified":"2013-12-29T20:43:18","modified_gmt":"2013-12-29T11:43:18","slug":"post-2930","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/d3-js\/2930","title":{"rendered":"\u3010D3.js\u3011\u30bf\u30a4\u30e0\u30be\u30fc\u30f3\u30de\u30c3\u30d7\u3092\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002"},"content":{"rendered":"

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

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

\u30bf\u30a4\u30e0\u30be\u30fc\u30f3\u60c5\u5831\u3092\u542b\u3093\u3060KML\u30c7\u30fc\u30bf\u3092\u516c\u958b\u3057\u3066\u304f\u308c\u3066\u3044\u308b\u65b9\u304c\u3044\u305f\u306e\u3067\u3001\u305d\u3061\u3089\u3092\u5229\u7528\u3055\u305b\u3066\u3082\u3089\u3063\u3066\u30bf\u30a4\u30e0\u30be\u30fc\u30f3\u30de\u30c3\u30d7\u3092\u4f5c\u6210\u3057\u3066\u307f\u307e\u3057\u305f\u3002
\n\u6a19\u6e96\u6642\u306b\u5bfe\u3059\u308b\u6642\u5dee\u304c\u30d7\u30e9\u30b9\u306b\u306a\u308b\u304b\u30de\u30a4\u30ca\u30b9\u306b\u306a\u308b\u304b\u3067\u8272\u5206\u3051\u3057\u3066\u307f\u307e\u3057\u305f\u304c\u3001\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u3067\u8868\u73fe\u3059\u308b\u3088\u308a\u3001\u3082\u3063\u3068\u306f\u3063\u304d\u308a\u8272\u5206\u3051\u3057\u305f\u65b9\u304c\u5206\u304b\u308a\u6613\u304b\u3063\u305f\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002\u3042\u3068\u3001\u8868\u793a\u3055\u308c\u308b\u307e\u3067\u3061\u3087\u3063\u3068\u6642\u9593\u304c\u304b\u304b\u308a\u307e\u3059\u3002<\/p>\n

\u30bf\u30a4\u30e0\u30be\u30fc\u30f3\u30c7\u30fc\u30bf<\/a><\/p>\n

\u30c7\u30fc\u30bf\u30bb\u30c3\u30c8\u4f5c\u6210\u306e\u624b\u9806\u306f\u4ee5\u4e0b\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n

    \n
  1. \u4e0a\u8a18KML\u3092Quantum GIS\u306b\u8aad\u307f\u8fbc\u307f\u3002<\/li>\n
  2. \u30c7\u30fc\u30bf\u30b5\u30a4\u30ba\u304c\u5927\u304d\u304b\u3063\u305f\u306e\u3067\u30b8\u30aa\u30e1\u30c8\u30ea\u30c4\u30fc\u30eb\u3092\u4f7f\u3063\u3066\u7c21\u7d20\u5316\u3057\u307e\u3057\u305f\u3002<\/li>\n
  3. GeoJSON\u306b\u5909\u63db\u3057\u3066\u30a8\u30af\u30b9\u30dd\u30fc\u30c8\u3002<\/li>\n
  4. \u3055\u3089\u306bGeoJSON\u3092TopoJSON\u306b\u5909\u63db\u3002<\/li>\n<\/ol>\n

     
    \n <\/p>\n

    \u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9<\/h2>\n
    \n<\/hr>\n
    d3.json("timezones.topojson", function(json) {\r\n\td3main(json);\r\n});\r\n\r\n\r\nfunction d3main(json){\r\n\tvar width = 960;\r\n\tvar height = 600;\r\n\t\r\n\tvar svg = d3.select("svg")\r\n\t\t.attr("width", width)\r\n\t\t.attr("height", height);\r\n\t\r\n\tvar mapGroup = svg.append('g')\r\n\t\t.attr("transform", "translate (" + [0, 100] + ")" );\r\n\r\n\t\/\/\u6295\u5f71\u6cd5\u8a2d\u5b9a\r\n\tvar projection = d3.geo.equirectangular()\r\n\t\t.scale(153)\r\n\t\t.rotate([0,0,0])\r\n\t\t.precision(.1);\r\n\r\n\t\/\/\u30d1\u30b9\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc\r\n\tvar path = d3.geo.path().projection(projection);\r\n\r\n\t\/\/\u30ab\u30e9\u30fc\u30b9\u30b1\u30fc\u30eb\r\n\tvar landColor = d3.scale.linear().domain([-10,   0,  11]).range(["blue", "white", "red"]);\r\n\r\n\t\/\/\u5730\u56f3\u8ffd\u52a0  \r\n\tvar map =  mapGroup.append("svg:g")\r\n\t\t.selectAll("path")\r\n\t\t.data(topojson.object(json, json.objects.timezones).geometries)\r\n\t\t.enter()\r\n\t\t.append("svg:path")\r\n\t\t.attr({\r\n\t\t\t"d": function(d){ return path(d) },\r\n\t\t\t"fill": function(d){\r\n\t\t\t\treturn landColor(parseFloat(d.properties.Name.match(\/.d{1,2}|0\/)[0]) ); \/\/Name\u30d7\u30ed\u30d1\u30c6\u30a3\u304b\u3089\u6570\u5024\u3060\u3051\u629c\u304d\u51fa\u3057\u3066\u9069\u7528\r\n\t\t\t\t},\r\n\t\t\t"fill-opacity": 1,\r\n\t\t\t"stroke": "black"\r\n\t\t})\r\n\t\t.append('title')\r\n\t\t.text(function(d){ return d.properties.Name});\r\n\t\t\r\n\t\/\/\u30e9\u30d9\u30eb\u7528\u30de\u30fc\u30b8\u30f3\r\n\tvar lableMargin = {\r\n\t\tleft:50,\r\n\t\ttop:50\r\n\t}\r\n\r\n\t\/\/\u30e9\u30d9\u30eb\u4f5c\u6210    \r\n\tvar rectSize = 10;\r\n\tvar rect = svg.selectAll('rect')\r\n\t.data(d3.range(-10, 10))\r\n\t.enter()\r\n\t.append('rect')\r\n\t.attr({\r\n\t\tx:function(d, i){ return i * rectSize + lableMargin.left},\r\n\t\ty:lableMargin.top,\r\n\t\twidth:rectSize,\r\n\t\theight:rectSize,\r\n\t\tfill:function(d){ return landColor(d) }\r\n\t});\r\n\t\t\r\n\tvar xAxis = d3.svg.axis().scale( d3.scale.linear().domain([-10, 10]).range([0, 20*rectSize])).tickValues([-10, 0, 10]);\r\n\r\n\tvar AxisGroup = svg.append('g')\r\n\t.attr({\r\n\t\tclass:"axis",\r\n\t\ttransform:"translate (" + [lableMargin.left, lableMargin.top+rectSize+2] + ")"\r\n\t})\r\n\t.call(xAxis);\r\n}<\/pre>\n
    \u3010\u4f59\u8ac7\u3011
    \n\u30ed\u30b7\u30a2\u3063\u3066\u540c\u3058\u56fd\u306e\u306a\u304b\u3067\u3082\u3001\u6771\u3068\u897f\u3067\uff15\u6642\u9593\u3082\u6642\u5dee\u304c\u3042\u308b\u3093\u3067\u3059\u306d\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
    example \u30bf\u30a4\u30e0\u30be\u30fc\u30f3\u60c5\u5831\u3092\u542b\u3093\u3060KML\u30c7\u30fc…<\/p>\n","protected":false},"author":1,"featured_media":2931,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-2930","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\/2930","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=2930"}],"version-history":[{"count":0,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/2930\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/2931"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=2930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=2930"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=2930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}