{"id":3935,"date":"2014-12-16T13:54:31","date_gmt":"2014-12-16T04:54:31","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=3935"},"modified":"2014-12-17T13:53:03","modified_gmt":"2014-12-17T04:53:03","slug":"post-3935","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/d3-js\/3935","title":{"rendered":"Webix\u3068D3.js\u3092\u4f7f\u3063\u3066\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u306a\u30b0\u30e9\u30d5\u3092\u4f5c\u6210\u3059\u308b"},"content":{"rendered":"

Webix Advent Calendar 2014<\/a> \uff11\uff16\u65e5\u76ee\u306e\u8a18\u4e8b\u3067\u3059\u3002<\/p>\n

\u4eca\u56de\u306fWebix\u306bD3.js\u3092\u7d44\u307f\u8fbc\u3093\u3067\u30b0\u30e9\u30d5\u3092\u8868\u793a\u3057\u307e\u3059\u3002<\/p>\n

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

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

\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u3057\u3066\u8868\u793a\u3057\u305f\u30b0\u30e9\u30d5\u306f\u30a6\u30a4\u30f3\u30c9\u30a6\u3084\u5883\u754c\u7dda\u3092\u79fb\u52d5\u3057\u305f\u969b\u306b\u3001\u81ea\u52d5\u7684\u306b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30b5\u30a4\u30ba\u306b\u30b0\u30e9\u30d5\u304c\u30ea\u30b5\u30a4\u30ba\u3055\u308c\u307e\u3059\u3002<\/p>\n

\u30ab\u30b9\u30bf\u30e0\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/h2>\n

Webix\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u3057\u3066D3\u3092\u5229\u7528\u3067\u304d\u308b\u30ab\u30b9\u30bf\u30e0\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u30ab\u30b9\u30bf\u30e0\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4f5c\u308a\u65b9\u306b\u3064\u3044\u3066\u306f\u307e\u305f\u5225\u9014\u8aac\u660e\u3059\u308b\u306e\u3067\u3001\u4eca\u56de\u306f\u4e0b\u8a18\u30b3\u30fc\u30c9\u3092\u4fdd\u5b58\u3057Webix\u30e9\u30a4\u30d6\u30e9\u30ea\u3068\u3068\u3082\u306b\u5916\u90e8\u30d5\u30a1\u30a4\u30eb\u3068\u3057\u3066\u8aad\u307f\u8fbc\u3093\u3067\u304f\u3060\u3055\u3044\u3002<\/p>\n

webix.protoUI({\r\n\tname:\"d3-chart\",\r\n\tdefaults:{\r\n\t},\r\n\t$init:function(){\r\n\t\tthis._ready_awaits = 0;\r\n\t\tthis.attachEvent(\"onAfterLoad\", function(){\r\n\t\t\tif (this._ready_awaits == 2){\r\n\t\t\t\tif (this.config.ready){\r\n\t\t\t\t\tthis.config.ready.call(this, this.data);\r\n\t\t\t\t\tthis._ready_awaits = 3;\r\n\t\t\t\t}\r\n\t\t\t} else this._ready_awaits = 1;\r\n\t\t});\r\n\r\n\t\twebix.delay(webix.bind(this._render_once, this));\r\n\t},\r\n\t_render_once:function(){\r\n\t\t\/\/\u30e9\u30a4\u30d6\u30e9\u30ea\u304c\u8aad\u307f\u8fbc\u307e\u308c\u3066\u3044\u306a\u3044\u6642\u306e\u8aad\u307f\u8fbc\u307f\u5148\u3092\u6307\u5b9a\r\n\t\twebix.require(\"d3.v3.min.js\", function(first_init){\r\n\r\n\t\t\tif (this.config.init)\r\n\t\t\t\tthis.config.init.call(this);\r\n\t\t\tif (this._ready_awaits == 1 && this.config.ready){\r\n\t\t\t\tthis.config.ready.call(this, this.data);\r\n\t\t\t\tthis._ready_awaits = 3;\r\n\t\t\t} else \r\n\t\t\t\tthis._ready_awaits = 2;\r\n\r\n\r\n  \t\t}, this);\r\n\t},\r\n\t$setSize:function(x,y){\r\n\t\tif (webix.ui.view.prototype.$setSize.call(this,x,y)){\r\n\t\t\tif (this._ready_awaits == 3 && this.config.resize){\r\n\t\t\t\tthis.$view.innerHTML = \"\";\r\n\t\t\t\tthis.config.ready.call(this, this.data);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}, webix.AtomDataLoader, webix.EventSystem, webix.ui.view );<\/pre>\n
\u30b5\u30f3\u30d7\u30eb<\/h2>\n
\u4eca\u56de\u306fD3\u30e9\u30a4\u30d6\u30e9\u30ea\u3092webix\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u306f\u5225\u306b\u8aad\u307f\u8fbc\u307f\u307e\u3059\u3002
\n(\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5074\u3067\u8aad\u307f\u8fbc\u3080\u3053\u3068\u3082\u53ef\u80fd\u3067\u3059)<\/p>\n
<script src=\"http:\/\/\/\/cdnjs.cloudflare.com\/ajax\/libs\/d3\/3.5.2\/d3.min.js\"><\/script>\r\n<script src=\"http:\/\/shimz.me\/libs\/webix\/codebase\/webix.js\"><\/script>\r\n<script src=\"..\/d3-chart.js\"><\/script>\r\n\r\n<script type=\"text\/javascript\">\r\nwebix.require.disabled = true; \/\/\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u81ea\u50cd\u8aad\u307f\u8fbc\u307f\u3092\u7121\u52b9\u306b\u3059\u308b\r\n<\/script><\/pre>\n
\u25a0 \u6298\u308c\u7dda\u30b0\u30e9\u30d5\u3092\u8868\u793a\u3059\u308b<\/strong><\/p>\n
var line_chart = {\r\n\tview:\"d3-chart\",\r\n\tresize:true,\r\n\turl:\"..\/_data\/test.json\",\r\n\tready:function(){\r\n\t\tvar dataSet = this.data.test;\r\n\t\t\/\/\u6298\u308c\u7dda\u30b0\u30e9\u30d5\u3092\u8868\u793a\u3059\u308b\u30a8\u30ea\u30a2\u306e\u30de\u30fc\u30b8\u30f3\r\n\t\tvar margin = {\r\n\t\t\ttop: 10, right: 40,\r\n\t\t\tbottom: 30, left: 80\r\n\t\t}\t\t\r\n\r\n\t\t\/\/\u6298\u308c\u7dda\u30b0\u30e9\u30d5\u3092\u8868\u793a\u3059\u308b\u30b9\u30c6\u30fc\u30b8\u306e\u30b5\u30a4\u30ba\r\n\t\tvar stageW = this.$width - margin.left - margin.right;\r\n\t\tvar stageH = this.$height - margin.top - margin.bottom;\r\n\r\n\t\t\/\/\u30b9\u30c6\u30fc\u30b8\u8ffd\u52a0\r\n\t\tvar svg = d3.select(this.$view)\r\n\t\t\t.append(\"svg\")\r\n\t\t\t.attr({\r\n\t\t\t\t\"width\": this.$width,\r\n\t\t\t\t\"height\": this.$height\r\n\t\t\t});\r\n\t\t\r\n\t\t\/\/svg\u8981\u7d20\u306e\u4e2d\u306bg(\u30b0\u30eb\u30fc\u30d7)\u8981\u7d20\u3092\u8ffd\u52a0\t\r\n\t\tvar stage = svg.append(\"g\") \r\n\t\t\t.attr(\"transform\", \"translate(\" + [margin.left, margin.top] + \")\");\r\n\r\n\t\t\/\/\u30b9\u30b1\u30fc\u30eb\u8a2d\u5b9a\r\n\t\tvar xScale = d3.scale.linear().range([0, stageW]);\r\n\t\tvar yScale = d3.scale.linear().range([stageH, 0]);\r\n\r\n\t\t\/\/\u30b9\u30b1\u30fc\u30eb\u306e\u30c9\u30e1\u30a4\u30f3\u7bc4\u56f2\u3092\u8a2d\u5b9a(\u624b\u629c\u304d)\r\n\t\txScale.domain([2000, 2014]);\r\n\t\tyScale.domain([0, 150000]);\r\n\t\t\r\n\t\t\/\/\u30e9\u30a4\u30f3\u63cf\u753b\u95a2\u6570\u3092\u4f5c\u6210\r\n\t\tvar valueLine = d3.svg.line()\r\n\t\t\t.x(function(d){ return xScale(+d['year']) })\r\n\t\t\t.y(function(d){ return yScale(+d['count']) })\r\n\t\t\r\n\t\t\/\/\u6298\u308c\u7dda\u30b0\u30e9\u30d5\u3092\u63cf\u753b\r\n\t\tstage.append(\"path\")\r\n\t\t\t.attr({\r\n\t\t\t\t\"d\": valueLine(dataSet),\r\n\t\t\t\tfill: \"none\",\r\n\t\t\t\tstroke: \"blue\",\r\n\t\t\t\t\"stroke-width\": 2\r\n\t\t\t});\r\n\t\t\t\r\n\t\t\/\/x\u8ef8\u306e\u76ee\u76db\u308a\u3092\u63cf\u753b\r\n\t\tvar xAxis = d3.svg.axis().scale(xScale).orient('bottom')\r\n\t\t.ticks(10)\r\n\t\t.tickFormat(d3.format(\"0f\"))\r\n\t\t.innerTickSize(-stageH)  \/\/ \u76ee\u76db\u7dda\u306e\u9577\u3055\uff08\u5185\u5074\uff09\r\n\t\t.outerTickSize(0) \/\/ \u76ee\u76db\u7dda\u306e\u9577\u3055\uff08\u5916\u5074\uff09\r\n\t\t.tickPadding(10); \/\/ \u76ee\u76db\u7dda\u3068\u30c6\u30ad\u30b9\u30c8\u306e\u9593\u306e\u9577\u3055\t\t\r\n\t\t\r\n\t\tstage.append(\"g\")\r\n\t\t\t.attr({\r\n\t\t\t\t\"class\": \"x axis\",\r\n\t\t\t\t\"transform\": \"translate(\"+[0, stageH]+\")\",\r\n\t\t\t})\t\t\t\r\n\t\t\t.call(xAxis);\t\t\t\r\n\r\n\t\t\/\/y\u8ef8\u306e\u76ee\u76db\u308a\u3092\u63cf\u753b\r\n\t\tvar yAxis = d3.svg.axis().scale(yScale)\r\n\t\t.orient('left')\r\n\t\t.ticks(10)\r\n\t\t;\r\n\t\tstage.append(\"g\")\r\n\t\t\t.attr({\r\n\t\t\t\t\"class\": \"y axis\",\r\n\t\t\t}).call(yAxis);\r\n\t\t\t\r\n\t}\r\n\r\n}\t<\/pre>\n
\u25a0 \u5186\u30b0\u30e9\u30d5\u3092\u8868\u793a\u3059\u308b<\/strong><\/p>\n
var pie_chart = {\r\n\tview:\"d3-chart\",\r\n\tresize:true,\r\n\turl:\"..\/_data\/test.json\",\r\n\tready:function(){\r\n\t\tvar colorScale = d3.scale.category10();\r\n\t\tvar dataSet = this.data.test;\r\n\t\t\/\/\u6298\u308c\u7dda\u30b0\u30e9\u30d5\u3092\u8868\u793a\u3059\u308b\u30a8\u30ea\u30a2\u306e\u30de\u30fc\u30b8\u30f3\r\n\t\tvar margin = {\r\n\t\t\ttop: 10, right: 10,\r\n\t\t\tbottom: 10, left: 10\r\n\t\t}\t\t\r\n\r\n\t\t\/\/\u6298\u308c\u7dda\u30b0\u30e9\u30d5\u3092\u8868\u793a\u3059\u308b\u30b9\u30c6\u30fc\u30b8\u306e\u30b5\u30a4\u30ba\r\n\t\tvar stageW = this.$width - margin.left - margin.right;\r\n\t\tvar stageH = this.$height - margin.top - margin.bottom;\r\n\t\tvar r = (stageW > stageH) ? Math.floor(stageH\/2) : Math.floor(stageW\/2);\r\n\r\n\t\t\/\/\u30b9\u30c6\u30fc\u30b8\u8ffd\u52a0\r\n\t\tvar svg = d3.select(this.$view)\r\n\t\t\t.append(\"svg\")\r\n\t\t\t.attr({\r\n\t\t\t\t\"width\": this.$width,\r\n\t\t\t\t\"height\": this.$height\r\n\t\t\t});\r\n\t\t\r\n\r\n\r\n\t\tvar arcsGroup = svg\r\n\t\t\t.data([dataSet])   \/\/pie\u3067\u5909\u63db\u3059\u308b\u305f\u3081\u306b\u8981\u7d20\uff11\u306e\u914d\u5217\u3068\u3057\u3066\u30c7\u30fc\u30bf\u3092\u6e21\u3059\r\n\t\t\t.append(\"svg:g\")\r\n\t\t\t.attr(\"transform\", \"translate(\" + Math.floor( this.$width\/2) + \",\" + Math.floor( this.$height\/2) + \")\")\r\n\t \r\n\t\tvar pie = d3.layout.pie().value(function(d) {console.log(d); return +d.count; });        \r\n\t\tvar arc = d3.svg.arc().outerRadius(r).innerRadius(Math.floor(r\/2));\r\n\t \r\n\t\tvar sliceGroup = arcsGroup.selectAll(\"g.slice\")     \r\n\t\t\t.data(pie)\r\n\t\t\t.enter()\r\n\t\t\t.append(\"svg:g\")\r\n\t\t\t.attr(\"class\", \"slice\");\r\n\t\t   \r\n\t\tvar slicePaths = sliceGroup.append(\"svg:path\")\r\n\t\t\t.attr({\r\n\t\t\t\tfill: function(d, i){ return colorScale(i); },\r\n\t\t\t\tstroke:\"white\",\r\n\t\t\t\td: arc\r\n\t\t\t});\t\r\n\t\t\t\r\n\t}\r\n\r\n}\t<\/pre>\n
\u25a0 \u30ec\u30a4\u30a2\u30a6\u30c8<\/strong><\/p>\n
webix.ui({\r\n    id:\"layout\", \r\n    rows:[\r\n        {template:\"header\", height:40}, \r\n\t\t{view:\"resizer\"},\r\n        { cols:[\r\n            line_chart,  \/\/\u6298\u308c\u7dda\u30b0\u30e9\u30d5\u3092\u8868\u793a\r\n\t\t\t{view:\"resizer\"},\r\n            pie_chart\t\/\/\u5186\u30b0\u30e9\u30d5\u3092\u8868\u793a\r\n        ]},\r\n\t\t{view:\"resizer\"},\r\n\t\t{template:\"fotter\", height:40}\r\n    ]\r\n});\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Webix Advent Calendar 201…<\/p>\n","protected":false},"author":1,"featured_media":3936,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,58],"tags":[],"class_list":["post-3935","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-d3-js","category-webix","has-post-thumbnail-archive"],"_links":{"self":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/3935","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=3935"}],"version-history":[{"count":0,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/3935\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/3936"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=3935"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=3935"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=3935"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}