{"id":3737,"date":"2014-09-09T11:24:24","date_gmt":"2014-09-09T02:24:24","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=3737"},"modified":"2014-09-09T11:26:08","modified_gmt":"2014-09-09T02:26:08","slug":"post-3737","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/d3-js\/3737","title":{"rendered":"\u30b0\u30e9\u30d5\u3092\u4e00\u5207\u66f8\u304b\u306a\u3044D3.js\u52c9\u5f37\u4f1a\u3092\u958b\u50ac\u3057\u307e\u3057\u305f\u3002"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2014\/08\/d3.jpg\" alt=\"Data-Driven Documents ?\" width=\"497\" height=\"272\" class=\"aligncenter size-full wp-image-3690\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2014\/08\/d3.jpg 497w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2014\/08\/d3-274x150.jpg 274w\" sizes=\"auto, (max-width: 497px) 100vw, 497px\" \/><\/p>\n<p>\u5148\u9031\u3001\u571f\u66dc\u65e5\u306b\u300c<a href=\"http:\/\/connpass.com\/highlight\/\">\u30b0\u30e9\u30d5\u3092\u4e00\u5207\u66f8\u304b\u306a\u3044D3.js\u52c9\u5f37\u4f1a<\/a>\u300d\u3092\u884c\u3044\u307e\u3057\u305f\u3002<br \/>\n\u7b2c\u4e00\u90e8\u306e\u5185\u5bb9\u306f\u3001<a href=\"https:\/\/gunmagisgeek.com\/blog\/d3-js\/3595\">FOSS4G 2014 Hokkaido<\/a>\u306e\u5185\u5bb9\u3068\u540c\u3058\u3082\u306e\u3092\u884c\u3063\u305f\u306e\u3067\u305d\u308c\u306f\u3044\u3044\u3068\u3057\u3066\u3001\u7b2c\u4e8c\u90e8\u306e\u65b9\u306f\u2026\u2026\u6b63\u76f4\u6e96\u5099\u4e0d\u8db3\u3060\u3063\u305f\u304b\u306a\u3068\u3002<br \/>\n\u4e00\u756a\u306e\u554f\u984c\u306f\u3001\u4f7f\u304a\u3046\u3068\u3057\u3066\u3044\u305fCodepen\u306e<a href=\"https:\/\/gunmagisgeek.com\/blog\/web\/2860\">\u30d7\u30ed\u30d5\u30a7\u30c3\u30b5\u30fc\u30e2\u30fc\u30c9<\/a>\u304c\u73fe\u5834\u3067\u306f\u91cd\u304f\u3066\u4f7f\u3048\u306a\u304b\u3063\u305f\u3053\u3068\u3067\u3059\u304b\u306d\u3002<br \/>\n\u305d\u306e\u305f\u3081\u3001\u76f4\u524d\u306b\u306a\u3063\u3066\u30ef\u30bf\u30ef\u30bf\u3057\u3066\u3057\u307e\u3044\u8efd\u304f\u30d1\u30cb\u30c3\u30af\uff01\u3000\u6025\u907d\u3001\u5225\u306e\u65b9\u6cd5\u3067\u8aac\u660e\u3092\u884c\u3063\u305f\u308f\u3051\u3067\u3059\u304c\u3001\u9060\u304f\u306e\u5e2d\u306b\u3044\u305f\u65b9\u306b\u306f\u30d7\u30ed\u30b8\u30a7\u30af\u30bf\u30fc\u3067\u306f\u30b3\u30fc\u30c9\u304c\u898b\u3048\u3065\u3089\u304b\u3063\u305f\u3068\u601d\u3044\u307e\u3059\u3002<br \/>\n\u3084\u306f\u308a\u4e8b\u524d\u306b\u73fe\u5834\u3067\u306e\u78ba\u8a8d\u304c\u5fc5\u8981\u3060\u306a\u30fc\u3068\u601d\u3044\u307e\u3057\u305f\u3002<br \/>\n\uff08\u3067\u304d\u308c\u3070\u30ea\u30cf\u30fc\u30b5\u30eb\u306a\u3093\u304b\u3082\u3084\u3063\u305f\u65b9\u304c\u826f\u3044\u306e\u304b\u3082\uff09<\/p>\n<p>\u3068\u308a\u3042\u3048\u305a\u7b2c\u4e8c\u90e8\u3067\u4f7f\u3063\u305f\u8cc7\u6599\u3092\u63b2\u8f09\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n<h2>\u8cc7\u6599<\/h2>\n<p>D3.js\u306f\u300c\u675f\u7e1b\u3057\u305f\u30c7\u30fc\u30bf\u30bb\u30c3\u30c8\u30a8\u30ec\u30e1\u30f3\u30c8\u306e\u5dee\u5206\u3092\u64cd\u4f5c\u3059\u308b\u3063\u3066\u30a4\u30e1\u30fc\u30b8\u3059\u308b\u3068\u7406\u89e3\u3057\u3084\u3059\u3044\u3067\u3059\u3088\u30fc\u300d\u3068\u3044\u3046\u3053\u3068\u304c\u8a00\u3044\u305f\u304b\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u3061\u3083\u3093\u3068\u4f1d\u3048\u3089\u308c\u305f\u611f\u3058\u304c\u3057\u307e\u305b\u3093\u3000orz<br \/>\n\u3068\u308a\u3042\u3048\u305a\u3001\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u3068\u304b\u5f04\u3063\u3066\u3082\u3089\u3048\u308b\u3068\u591a\u5c11\u5206\u304b\u308a\u3084\u3059\u3044\u304b\u3082\u3002<br \/>\n<iframe loading=\"lazy\" src=\"\/\/www.slideshare.net\/slideshow\/embed_code\/38776129\" width=\"590\" height=\"400\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" style=\"border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;\" allowfullscreen> <\/iframe> <\/p>\n<div style=\"margin-bottom:5px\"> <strong> <a href=\"https:\/\/www.slideshare.net\/xxshimizuxx\/d3jsdom\" title=\"D3.js\u306b\u3088\u308bDOM\u64cd\u4f5c\" target=\"_blank\" rel=\"noopener noreferrer\">D3.js\u306b\u3088\u308bDOM\u64cd\u4f5c<\/a> <\/div>\n<p>\u6587\u5b57\u304c\u8aad\u307f\u8f9b\u3044\u306e\u3067\u30d5\u30eb\u30b9\u30af\u30ea\u30fc\u30f3\u3067\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/p>\n<h3>\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9<\/h3>\n<p><a href=\"http:\/\/shimz.me\/example\/d3js\/binding_data\/index2.html\">example<\/a><\/p>\n<pre class=\"lang:xhtml decode:true \" >&lt;body&gt;\r\n&lt;h3&gt;\u9806\u756a\u306b\u5b9f\u884c\u2192&lt;\/h3&gt;\r\n&lt;button id=\"enter_append\"&gt;binding:dataset1 enter.append&lt;\/button&gt;\r\n&lt;button id=\"update\"&gt;update&lt;\/button&gt;\r\n&lt;button id=\"binding_dataset2\"&gt;binding:dataset2 update&lt;\/button&gt;\r\n&lt;button id=\"exit_update\"&gt;exit.update&lt;\/button&gt;\r\n&lt;button id=\"exit_remove\"&gt;exit.remove&lt;\/button&gt;\r\n&lt;div id=\"stage\"&gt;\r\n\t&lt;p&gt;test1&lt;\/p&gt;\r\n\t&lt;p&gt;test2&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n\r\n\r\n&lt;script&gt;\r\nvar dataSet1 = [\r\n\t{id:1, label:\"hoge\", value:100},\r\n\t{id:2, label:\"hello\", value:200},\r\n\t{id:3, label:\"wold\", value:300},\r\n\t{id:4, label:\"fuga\", value:400},\r\n\t{id:5, label:\"ora\", value:500},\r\n\t{id:6, label:\"muda\", value:600}\r\n]\r\n\r\nvar dataSet2 = [\r\n\t{id:1, label:\"hoge\", value:100},\r\n\t{id:2, label:\"hello\", value:200},\r\n\t{id:4, label:\"fuga\", value:400},\r\n\t{id:5, label:\"ora\", value:500},\r\n\t{id:6, label:\"muda\", value:600}\r\n]\r\n\r\n\r\nvar div = d3.select(\"#stage\");\r\n\r\n\r\n\/*\r\n * \u30c7\u30fc\u30bf\u30bb\u30c3\u30c8\uff11\u306b\u5bfe\u3057\u3066\u8db3\u308a\u306a\u3044\u30a8\u30ec\u30e1\u30f3\u30c8\u3092\u8ffd\u52a0\r\n *\/\r\nd3.select(\"#enter_append\").on(\"click\", function(){\r\n\tdiv.selectAll(\"p\")\r\n\t\t.data(dataSet1)\r\n\t\t.enter()\r\n\t\t.append(\"p\")\r\n\t\t.text(function(d){ return d.label });\r\n});\r\n\r\n\/*\r\n * \u675f\u7e1b\u3055\u308c\u3066\u3044\u308b\u30c7\u30fc\u30bf\u3092\u5143\u306b\u30a8\u30ec\u30e1\u30f3\u30c8\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\r\n *\/\r\nd3.select(\"#update\").on(\"click\", function(){\r\n\t\tdiv.selectAll(\"p\")\r\n\t\t.style(\"background-color\", \"red\")\r\n\t\t.style(\"color\", \"white\")\r\n\t\t.text(function(d){ return d.label });\r\n});\r\n\r\n\r\n\/*\r\n * \u30c7\u30fc\u30bf\u30bb\u30c3\u30c8\uff12\u3092\u30a8\u30ec\u30e1\u30f3\u30c8\u306b\u675f\u7e1b\u3057\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\r\n *\/\r\nd3.select(\"#binding_dataset2\").on(\"click\", function(){\r\n\tdiv.selectAll(\"p\")\r\n\t\t.data(dataSet2, function(d){ return d.id })\r\n\t\t.style(\"background-color\", \"blue\")\r\n});\r\n\r\n\r\n\/*\r\n * \u30c7\u30fc\u30bf\u30bb\u30c3\u30c8\uff12\u306b\u5bfe\u3057\u591a\u3059\u304e\u308b\u30a8\u30ec\u30e1\u30f3\u30c8\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u30a2\u30c3\u30d7\u30c7\u30fc\u3068\r\n *\/\r\nd3.select(\"#exit_update\").on(\"click\", function(){\r\n\tdiv.selectAll(\"p\")\r\n\t\t.data(dataSet2, function(d){ return d.id })\r\n\t\t.exit()\r\n\t\t.style(\"background-color\", \"green\")\r\n});\r\n\r\n\/*\r\n * \u30c7\u30fc\u30bf\u30bb\u30c3\u30c8\uff12\u306b\u5bfe\u3057\u591a\u3059\u304e\u308b\u30a8\u30ec\u30e1\u30f3\u30c8\u3092\u524a\u9664\r\n *\/\r\nd3.select(\"#exit_remove\").on(\"click\", function(){\r\n\tdiv.selectAll(\"p\")\r\n\t\t.data(dataSet2, function(d){ return d.id })\r\n\t\t.exit()\r\n\t\t.remove();\r\n});\r\n\r\n\r\n\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;<\/pre>\n<h2>\u5099\u8003<\/h2>\n<p>\u52c9\u5f37\u4f1a\u306b\u3066\u3044\u305f\u3060\u3044\u305f\u8cea\u554f\u306b\u95a2\u3059\u308b\u8a18\u4e8b\u3092\u66f8\u304d\u307e\u3057\u305f\u3002<br \/>\n<a href=\"https:\/\/gunmagisgeek.com\/blog\/d3-js\/3738\">[SVG]\u30c9\u30fc\u30ca\u30c4\u72b6\u306ecircle\u3092\u63cf\u753b\u3059\u308b\u3002<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5148\u9031\u3001\u571f\u66dc\u65e5\u306b\u300c\u30b0\u30e9\u30d5\u3092\u4e00\u5207\u66f8\u304b\u306a\u3044D3.js\u52c9\u5f37&hellip;<\/p>\n","protected":false},"author":1,"featured_media":3690,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-3737","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\/3737","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=3737"}],"version-history":[{"count":0,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/3737\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/3690"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=3737"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=3737"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=3737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}