{"id":3501,"date":"2014-04-26T19:00:33","date_gmt":"2014-04-26T10:00:33","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=3501"},"modified":"2014-04-26T19:22:29","modified_gmt":"2014-04-26T10:22:29","slug":"post-3501","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/d3-js\/3501","title":{"rendered":"D3.js\u3067\u30b5\u30af\u30c3\u3068FizzBuzz\u3092\u53ef\u8996\u5316\u3059\u308b"},"content":{"rendered":"

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

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

D3.js\u3092\u4f7f\u3063\u3066\u3001FizzBuzz\u306e\u7d50\u679c\u3092\u30c6\u30fc\u30d6\u30eb\u3067\u8868\u793a\u3057\u307e\u3059\u3002
\nDOM\u306b\u30c7\u30fc\u30bf\u3092\u675f\u7e1b\u3059\u308bD3\u306e\u6a5f\u80fd\u3092\u4f7f\u3046\u3068\u975e\u5e38\u306b\u7c21\u5358\u306b\u4f5c\u6210\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n

\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9<\/h2>\n
(function(){\r\n\tvar START = 1,END = 100;\r\n\r\n\r\n\tvar FizzBuzz = function(num){\r\n\t\tif(num%15==0) return 'FizzBuzz';\r\n\t\tif(num%5==0) return 'Buzz';\r\n\t\tif(num%3==0) return 'Fizz';\r\n\t\treturn num;   \r\n\t}\r\n\r\n\t\/\/fizz buzz \u30ea\u30b9\u30c8\u4f5c\u6210\r\n\tvar list = d3.range(START,END+1).map(FizzBuzz);\r\n\r\n\r\n\r\n\t\/\/\u30ea\u30b9\u30c8\u309210\u500b\u3065\u3064\u306e\u914d\u5217\u306b\u5206\u5272\r\n\tvar fbDataSet = [];\r\n\tfor(var i=0; i < END; i+=10){\r\n\t\tfbDataSet.push( list.slice(i, i+10) );\r\n\t}\r\n\r\n\r\n\r\n\t\/\/table\u8981\u7d20\u4f5c\u6210\r\n\tvar table = d3.select('body').append('table');\r\n\r\n\t\/\/tr\u8981\u7d20\u4f5c\u6210\r\n\tvar tr = table.selectAll('tr')\r\n\t\t.data(fbDataSet)\r\n\t\t.enter()\r\n\t\t.append('tr');\r\n\r\n\t\/\/td\u8981\u7d20\u4f5c\u6210\r\n\tvar td = tr.selectAll('td')\r\n\t\t.data(function(d){ return d }) \/\/\u4eca\u56de\u306e\u30dd\u30a4\u30f3\u30c8\r\n\t\t.enter()\r\n\t\t.append('td')\r\n\t\t.attr({\r\n\t\t\tclass:function(d){ \r\n\t\t\t\treturn (typeof d=='string') ? d : null;\r\n\t\t\t}\r\n\t\t})\r\n\t\t.text(function(d){ return d } );\r\n\r\n})();<\/pre>\n
\u89e3\u8aac<\/h2>\n
\u3061\u3087\u3063\u3068\u3060\u3051\u89e3\u8aac<\/p>\n
FizzBuzz\u914d\u5217\u3092\u4f5c\u308b<\/h3>\n
var START = 1,END = 100;\r\n\r\nvar FizzBuzz = function(num){\r\n\tif(num%15==0) return 'FizzBuzz';\r\n\tif(num%5==0) return 'Buzz';\r\n\tif(num%3==0) return 'Fizz';\r\n\treturn num;   \r\n}\r\n\r\nvar list = d3.range(START,END+1).map(FizzBuzz);\r\n<\/pre>\n
d3.range\u306f\u7b49\u5dee\u6570\u5217\u3092\u542b\u3080\u30ea\u30b9\u30c8\u3092\u751f\u6210\u3057\u307e\u3059\u3002d3.range(1, 100)\u3092\u5b9f\u884c\u3059\u308b\u3068\u4ee5\u4e0b\u306e\u914d\u5217\u304c\u751f\u6210\u3055\u308c\u307e\u3059\u3002
\n[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, \u2026\u2026 99]<\/code>
\n\uff12\u756a\u76ee\u306e\u5f15\u6570\u306f\u8981\u7d20\u6570\u306e\u6307\u5b9a\u306a\u306e\u3067\u30011\u301c100\u307e\u3067\u306e\u6570\u5217\u3092\u4f5c\u308a\u305f\u3044\u3068\u304d\u306f+1\u3057\u307e\u3059\u3002
\n\u751f\u6210\u3057\u305f\u914d\u5217\u306bmap\u30e1\u30bd\u30c3\u30c9\u3092\u7528\u3044\u3066FizzBuzz\u95a2\u6570\u3092\u9069\u7528\u3057\u307e\u3059\u3002\u5b9f\u884c\u7d50\u679c\u304c\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002
\n[1, 2, \"Fizz\", 4, \"Buzz\", \"Fizz\", 7, 8, \u2026\u2026 \"Buzz\"]<\/code><\/p>\n
\u914d\u5217\u3092\u5206\u5272\u3057\u3066\u30c7\u30fc\u30bf\u30bb\u30c3\u30c8\u3092\u4f5c\u308b<\/h3>\n
var fbDataSet = [];\r\nfor(var i=0; i < END; i+=10){\r\n\tfbDataSet.push( list.slice(i, i+10) );\r\n}\r\n<\/pre>\n
\u4f5c\u6210\u3057\u305fFizzBuzz\u914d\u5217\u3092\uff11\uff10\u500b\u3065\u3064\u306b\u5206\u5272\u3057\u3066\uff12\u6b21\u5143\u914d\u5217\u306e\u30c7\u30fc\u30bf\u30bb\u30c3\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002
\n[
\n    [1, 2, \"Fizz\", 4, \"Buzz\", \"Fizz\", 7, 8, \"Fizz\", \"Buzz\"],
\n    [11, \"Fizz\", 13, 14, \"FizzBuzz\", 16, 17, \"Fizz\", 19, \"Buzz\"],
\n    (\u4e2d\u7565)
\n    [91, 92, \"Fizz\", 94, \"Buzz\", \"Fizz\", 97, 98, \"Fizz\", \"Buzz\"]
\n]
\n<\/code><\/p>\n
\u30c6\u30fc\u30d6\u30eb\u3092\u4f5c\u6210\u3059\u308b<\/h3>\n
body\u8981\u7d20\u306e\u4e2d\u306btable\u8981\u7d20\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n
var table = d3.select('body').append('table');\r\n<\/pre>\n
\u30c7\u30fc\u30bf\u30bb\u30c3\u30c8\u3092\u5143\u306btr\u8981\u7d20\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n
var tr = table.selectAll('tr')\r\n\t.data(fbDataSet)\r\n\t.enter()\r\n\t.append('tr');\r\n<\/pre>\n
\u3053\u306e\u6bb5\u968e\u3067\u30d6\u30e9\u30a6\u30b6\u306e\u958b\u767a\u8005\u30c4\u30fc\u30eb\u3092\u4f7f\u3044DOM\u306e\u72b6\u614b\u3092\u8997\u3044\u3066\u307f\u308b\u3068\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306bTR\u8981\u7d20\u304c\u8ffd\u52a0\u3055\u308c\u3066\u3044\u308b\u306e\u304c\u308f\u304b\u308a\u307e\u3059\u3002<\/p>\n
\"d3fizzbuzztable\"<\/p>\n
\u623b\u308a\u5024\u3092\u53ce\u3081\u3066\u3044\u308b\u5909\u6570tr\u306b\u306f\u3001\u8ffd\u52a0\u3057\u305f\u8981\u7d20\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304c\u5165\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n
d3.select('tr')\u3067\u4e2d\u8eab\u3092\u8997\u3044\u3066\u3044\u308b\u3068__data__\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u30c7\u30fc\u30bf\u30bb\u30c3\u30c8\u304c\u675f\u7e1b\u3055\u308c\u3066\u3044\u308b\u306e\u304c\u307f\u3066\u3068\u308c\u307e\u3059\u3002<\/p>\n
\"d3fizzbuzztable2\"<\/p>\n
td\u3092\u8ffd\u52a0\u3059\u308b<\/h3>\n
\u4eca\u56de\u306e\u30dd\u30a4\u30f3\u30c8\u3001td\u8981\u7d20\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n
var td = tr.selectAll('td')\r\n\t.data(function(d){ return d }) \r\n\t.enter()\r\n\t.append('td')\r\n\t.attr({\r\n\t\tclass:function(d){ \r\n\t\t\treturn (typeof d=='string') ? d : null;\r\n\t\t}\r\n\t})\r\n\t.text(function(d){ return d } );\r\n<\/pre>\n
D3\u306b\u306a\u308c\u3066\u3044\u306a\u3044\u3068\u6df7\u4e71\u3059\u308b\u306e\u304c\u4ee5\u4e0b\u306e\u90e8\u5206\u3002
\ntr.selectAll('td')
\n    .data(function(d){ return d })
\n    .enter()
\n    .append('td')
\n<\/code>
\ndata\u30e1\u30bd\u30c3\u30c9\u306b\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3092\u8a2d\u5b9a\u3057\u3001\u5f15\u6570\u3092return\u3067\u305d\u306e\u307e\u307e\u8fd4\u3057\u3066\u3044\u307e\u3059\u3002
\n\u3053\u308c\u304c\u4f55\u3092\u3084\u3063\u3066\u3044\u308b\u306e\u304b\u3068\u3044\u3046\u3068\u3001\u89aa\u8981\u7d20(tr)\u306b\u675f\u7e1b\u3055\u308c\u305f\u30c7\u30fc\u30bf\u30bb\u30c3\u30c8\u304c\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u306e\u5f15\u6570\u3068\u3057\u3066\u6e21\u3055\u308c\u308b\u306e\u3067\u3001\u305d\u308c\u3092\u305d\u306e\u307e\u307e\u623b\u308a\u5024\u3068\u3057\u3066data\u30e1\u30bd\u30c3\u30c9\u306b\u6e21\u3059\u3053\u3068\u3067td\u8981\u7d20\u3092\u5404tr\u8981\u7d20\u306e\u914d\u4e0b\u306b\u8ffd\u52a0\u3057\u3066\u3044\u307e\u3059\u3002
\n\u5f15\u6570\u306b\u4f55\u304c\u6e21\u3055\u308c\u3066\u3044\u308b\u304b\u3092\u898b\u308b\u305f\u3081\u306b\u3001return\u306e\u524d\u306bconsole.log\u3092\u8ffd\u52a0\u3057\u3066\u4e2d\u8eab\u3092\u898b\u3066\u307f\u308b\u3068\u308f\u304b\u308a\u3084\u3059\u3044\u3067\u3059\u3002
\ntr.selectAll('td').data(function(d){ console.log(d); return d })
\n> [1, 2, \"Fizz\", 4, \"Buzz\", \"Fizz\", 7, 8, \"Fizz\", \"Buzz\"]
\n> [11, \"Fizz\", 13, 14, \"FizzBuzz\", 16, 17, \"Fizz\", 19, \"Buzz\"]
\n> [\"Fizz\", 22, 23, \"Fizz\", \"Buzz\", 26, \"Fizz\", 28, 29, \"FizzBuzz\"]
\n(\u4e2d\u7565)
\n> [91, 92, \"Fizz\", 94, \"Buzz\", \"Fizz\", 97, 98, \"Fizz\", \"Buzz\"]
\n<\/code>
\n\u3053\u306e\u6bb5\u968e\u3067DOM\u306e\u72b6\u614b\u3092\u8997\u3044\u3066\u307f\u308b\u3068td\u8981\u7d20\u304c\u8ffd\u52a0\u3055\u308c\u3066\u3044\u308b\u306e\u304c\u5206\u304b\u308a\u307e\u3059\u3002
\n\"d3fizzbuzztable4\"<\/p>\n
\u6b8b\u308a\u306e\u69cb\u6587(attr\u3068text)\u3067\u306f\u3001td\u306b\u6e21\u3055\u308c\u305f\u30c7\u30fc\u30bf\u304c\u6587\u5b57\u5217(\"Fizz\"\u3084\"Buzz\"\u3001\"FizzBuzz\")\u3060\u3063\u305f\u5834\u5408\u3001td\u306ecalss\u5c5e\u6027\u3068\u3057\u3066\u8a2d\u5b9a\u3057\u3001\u30c6\u30ad\u30b9\u30c8\u8981\u7d20\u3092\u8ffd\u52a0\u3057\u3066\u3044\u307e\u3059\u3002
\n\u6700\u7d42\u7684\u306a\u51fa\u529b\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
\"d3fizzbuzztable\"<\/p>\n
\u300cdata\u30e1\u30bd\u30c3\u30c9\u306e\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u306e\u5f15\u6570\u306b\u3001\u8981\u7d20\u306b\u675f\u7e1b\u3055\u308c\u3066\u3044\u308b\u30c7\u30fc\u30bf\u30bb\u30c3\u30c8\u304c\u6e21\u3055\u308c\u308b\u300d\u3068\u3044\u3046D3\u306e\u6a5f\u80fd\u3092\u4f7f\u3046\u3068\u3001\u30e1\u30f3\u30c9\u30a6\u306a\u51e6\u7406\u3082\u7d50\u69cb\u7c21\u5358\u306b\u4f5c\u6210\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
example D3.js\u3092\u4f7f\u3063\u3066\u3001FizzBuz…<\/p>\n","protected":false},"author":1,"featured_media":3502,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-3501","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\/3501","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=3501"}],"version-history":[{"count":0,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/3501\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/3502"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=3501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=3501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=3501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}