{"id":3087,"date":"2013-10-17T13:59:30","date_gmt":"2013-10-17T04:59:30","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=3087"},"modified":"2016-02-17T14:57:32","modified_gmt":"2016-02-17T05:57:32","slug":"post-3087","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/d3-js\/3087","title":{"rendered":"\u3010D3.js\u3011\u8907\u6570\u306e\u30c7\u30fc\u30bf\u30d5\u30a1\u30a4\u30eb\u306e\u8aad\u307f\u8fbc\u307f(\u975e\u540c\u671f\u51e6\u7406)\u3092\u307e\u3068\u3081\u308b"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/10\/f81fd2e4c52864042852c112ce927ae2.jpg\" alt=\"\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\" width=\"279\" height=\"180\" class=\"aligncenter size-full wp-image-3088\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/10\/f81fd2e4c52864042852c112ce927ae2.jpg 279w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2013\/10\/f81fd2e4c52864042852c112ce927ae2-233x150.jpg 233w\" sizes=\"auto, (max-width: 279px) 100vw, 279px\" \/><\/p>\n<p>d3\u3067\u8907\u6570\u306e\u30c7\u30fc\u30bf\u30d5\u30a1\u30a4\u30eb(json\u3084csv)\u3092\u8aad\u307f\u8fbc\u3080\u5834\u5408\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u5730\u7344\u306b\u9665\u308a\u3084\u3059\u3044\u3067\u3059\u3002<\/p>\n<pre class=\"lang:js decode:true \" >d3.json('test.json', function(json){\r\n    d3.csv('test1.csv', function(csv1){\r\n        d3.csv('test2.csv', function(csv2){\r\n            d3.csv('test3.csv', function(csv3){\r\n                d3main(json, csv1, csv2, csv3);\r\n            });\r\n        });        \r\n    });\r\n});\r\n\r\nfunction d3main(){\r\n    var data = Array.prototype.slice.call(arguments);\r\n}<\/pre>\n<p>\u307e\u3041\u3001\u305d\u3093\u306a\u306b\u4e00\u5ea6\u306b\u5927\u91cf\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u3080\u3053\u3068\u306f\u305d\u3046\u306a\u3044\u3093\u3067\u3059\u304c\u3001\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u304c\u5165\u308c\u5b50\u306b\u306a\u308b\u306e\u306f\u3042\u307e\u308a\u3046\u308c\u3057\u304f\u306a\u3044\u306e\u3067\u3001\u30c7\u30fc\u30bf\u30bb\u30c3\u30c8\u3092\u307e\u3068\u3081\u3066\u8aad\u307f\u8fbc\u3080\u95a2\u6570\u3092\u4f5c\u6210\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n<pre class=\"lang:js decode:true \" title=\"loadDataset.js\" >function loadDataSet(option){\r\n\tvar files = option[\"files\"];\r\n\tvar endFn = option[\"endFn\"];\r\n\tvar loadingStartFn = option[\"loadingStartFn\"];\r\n\tvar loadingSuccessFn = option[\"loadingSuccessFn\"];\r\n\t\r\n\tif (!Array.isArray(files)) throw \"TypeError: files is not a array!\";\r\n\tif (loadingStartFn && typeof loadingStartFn != \"function\") throw \"TypeError: loadingStartFn is not a function!\";\r\n\tif (loadingSuccessFn && typeof loadingSuccessFn != \"function\") throw \"TypeError: loadingSuccessFn is not a function!\";\r\n\tif (typeof endFn != \"function\") throw \"TypeError: endFn is not a function!\";\r\n\t\r\n\tvar dataStack = {}; \/\/\u8aad\u307f\u8fbc\u3093\u3060\u30c7\u30fc\u30bf\u3092\u4fdd\u5b58\u3059\u308b\u30b9\u30bf\u30c3\u30af\r\n\tvar fnStack = []; \/\/\u30c7\u30fc\u30bf\u8aad\u307f\u8fbc\u307f\u306b\u5fc5\u8981\u306aajax\u95a2\u6570\u3092\u4fdd\u5b58\u3059\u308b\u30b9\u30bf\u30c3\u30af\r\n\t\r\n    \/\/\u975e\u540c\u671f\u901a\u4fe1\u51e6\u7406\u3092\u30c1\u30a7\u30a4\u30f3\u3092\u4f7f\u3063\u3066\u9806\u6b21\u5b9f\u884c\u3059\u308b\u3002\u5404\u30d5\u30a1\u30f3\u30af\u30b7\u30e7\u30f3\u306b\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3092\u4ed5\u8fbc\u3080\r\n\tvar chain = function(functions) {\r\n\t\treturn functions.reduceRight(function (next, curr) {\r\n\t\t\treturn function () {\r\n\t\t\t\tcurr.apply({next: next}, arguments);\r\n\t\t\t}\r\n\t\t});\r\n\t}\r\n\t\r\n    \/\/\u30d5\u30a1\u30a4\u30eb\u306e\u6570\u3060\u3051\u975e\u540c\u671f\u51e6\u7406fanction\u3092\u30b9\u30bf\u30c3\u30af\u306b\u7a4d\u3080\r\n\tfiles.forEach(function(arg){\r\n\t\tif (loadingStartFn) loadingStartFn(arg);\r\n\t\tfnStack.push(\r\n\t\t\tfunction() {\r\n\t\t\t\tvar that = this;\r\n                \r\n\t\t\t\tvar exte = arg.file.split(\"?\")[0].split(\".\")[arg.file.split(\".\").length-1];\r\n                \r\n\t\t\t\tif (arg.filetype) exte = arg.filetype; \r\n\t\t\t\tvar readfile;\r\n\t\t\t\tswitch(exte){\r\n\t\t\t\t\tcase \"json\": case \"geojson\": case \"topojson\": \r\n\t\t\t\t\t\treadfile = d3.json;\r\n\t\t\t\t\tbreak;\r\n\t\t\t\t\tcase \"csv\":\r\n\t\t\t\t\t\treadfile = d3.csv;\r\n\t\t\t\t\tbreak;\r\n\t\t\t\t\tcase \"tsv\":\r\n\t\t\t\t\t\treadfile = d3.tsv;\r\n\t\t\t\t\tbreak;\r\n\t\t\t\t\tdefault:\r\n\t\t\t\t\t\tthrow \"TypeError: \" + exte + \" is not supported\";\r\n\t\t\t\t\tbreak;                        \r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\treturn readfile(arg.file,  function(data){\r\n\t\t\t\t\tif (arg.callbackData) arg.callbackData = data;\r\n\t\t\t\t\tif (loadingSuccessFn) loadingSuccessFn(arg);\r\n\t\t\t\t\tdataStack[arg.key] = data;\r\n\t\t\t\t\tthat.next();\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t)\r\n\t});\r\n\t\r\n    \/\/\u30b9\u30bf\u30c3\u30af\u306e\u6700\u5f8c\u306bendFn\u3092\u8ffd\u52a0\u3059\u308b\r\n\tfnStack.push(function(){\r\n\t\tendFn(dataStack);\r\n\t});\r\n    \r\n    \/\/\u30c1\u30a7\u30a4\u30f3\u51e6\u7406\u5b9f\u884c\r\n\tchain(fnStack)(); \r\n\t\t\r\n}    \t    \t\r\n<\/pre>\n<p>\u30d5\u30a1\u30a4\u30eb\u540d(\u30c7\u30fc\u30bf\u30bb\u30c3\u30c8)\u3092\u53ce\u3081\u305f\u914d\u5217\u3068\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3092\u6e21\u3059\u3068\u3001\u914d\u5217\u306e\u982d\u304b\u3089\u30c7\u30fc\u30bf\u3092\u8aad\u307f\u8fbc\u3093\u3067\u6700\u5f8c\u306b\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002<br \/>\n\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u306e\u5f15\u6570\u306b\u306f\u3001\u8aad\u307f\u8fbc\u3093\u3060\u30c7\u30fc\u30bf\u30bb\u30c3\u30c8\u3092\u5168\u3066\u307e\u3068\u3081\u305f\u30c7\u30fc\u30bf\u304c\u6e21\u3055\u308c\u307e\u3059\u3002<\/p>\n<pre class=\"lang:js decode:true \" >loadDataSet(\r\n    files: [\r\n\t\t{key:\"geo\", file:\"geo.topojson\", callbackData:true}, \r\n\t\t{key:\"hoge1\", file:\"test1.csv\"},\r\n\t\t{key:\"hoge2\", file:\"test2.csv\"},\r\n\t\t{key:\"hoge3\", file:\"test3.csv\"},\t\t\r\n\t],\r\n    endFn:d3main\r\n);\r\n\r\nfunction d3main(data){\r\n    console.log(data);\r\n}<\/pre>\n<p>\u4ed6\u3001\u30aa\u30d7\u30b7\u30e7\u30f3\u6307\u5b9a\u3002<\/p>\n<pre class=\"lang:js decode:true \" >loadDataSet({\r\n\tfiles: [\r\n\t\t{key:\"geo\", file:\"geo.topojson\", callbackData:true}, \/\/loadingSuccessFn\u306e\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u306b\u30c7\u30fc\u30bf\u3092\u8fd4\u3059\u30d5\u30e9\u30b0\r\n\t\t{key:\"2013\u5e741\u6708\", file:\"csv\/201301.txt\", filetype:\"tsv\"}, \/\/\u8aad\u307f\u8fbc\u307f\u30d5\u30a1\u30a4\u30eb\u30bf\u30a4\u30d7\u3092\u6307\u5b9a\r\n\t\t{key:\"2013\u5e742\u6708\", file:\"csv\/201302.csv\"},\r\n\t\t{key:\"2013\u5e743\u6708\", file:\"csv\/201303.csv\"},\t\t\r\n\t],\r\n\tloadingStartFn: function(d){\r\n\t\t\/\/\u5404\u30d5\u30a1\u30a4\u30eb\u306e\u8aad\u307f\u8fbc\u307f\u524d\u306b\u547c\u3073\u51fa\u3055\u308c\u308b\u95a2\u6570\r\n\t\tconsole.log(d.key+\" data loading...\");\r\n\t},\r\n\tloadingSuccessFn: function(d){\r\n\t\t\/\/\u5404\u30d5\u30a1\u30a4\u30eb\u306e\u8aad\u307f\u8fbc\u307f\u304c\u6210\u529f\u3059\u308b\u6bce\u306b\u547c\u3073\u51fa\u3055\u308c\u308b\u95a2\u6570\r\n\t\tif (d.key === \"geo\") mapDraw(d.callbackData); \/\/\u5148\u306b\u30de\u30c3\u30d7\u3060\u3051\u63cf\u753b\u3057\u3066\u304a\u304f\r\n\t\tconsole.log(d.key+\" data load success!\"); \r\n\t},\r\n\tendFn:d3main\r\n});\r\n\r\nfunction d3main(loadData){\r\n\tconsole.log(loadData);\t\r\n}\r\n\r\nfunction mapDraw(geoData){\r\n\t\/\/\u5730\u56f3\u3092\u63cf\u753b\u3059\u308b\u51e6\u7406\r\n}<\/pre>\n<p>\u3061\u3083\u3093\u3068\u3084\u308b\u306a\u3089\u3001<a href=\"https:\/\/github.com\/mbostock\/queue\">queue<\/a>\u3068\u304b<a href=\"https:\/\/github.com\/caolan\/async\">async.js<\/a>\u306a\u3069\u3092\u4f7f\u3063\u305f\u65b9\u304c\u3044\u3044\u3093\u3067\u3057\u3087\u3046\u3051\u3069\u306d\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>d3\u3067\u8907\u6570\u306e\u30c7\u30fc\u30bf\u30d5\u30a1\u30a4\u30eb(json\u3084csv)\u3092\u8aad&hellip;<\/p>\n","protected":false},"author":1,"featured_media":3088,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-3087","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\/3087","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=3087"}],"version-history":[{"count":1,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/3087\/revisions"}],"predecessor-version":[{"id":3089,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/3087\/revisions\/3089"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/3088"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=3087"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=3087"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=3087"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}