{"id":8777,"date":"2018-12-14T00:11:55","date_gmt":"2018-12-13T15:11:55","guid":{"rendered":"http:\/\/r-dimension.xsrv.jp\/classes_j\/?p=8777"},"modified":"2022-11-13T18:09:37","modified_gmt":"2022-11-13T09:09:37","slug":"stack","status":"publish","type":"post","link":"https:\/\/r-dimension.xsrv.jp\/classes_j\/stack\/","title":{"rendered":"\u7a4d\u307f\u4e0a\u3052\u30b0\u30e9\u30d5"},"content":{"rendered":"\n

\u7a4d\u307f\u4e0a\u3052\u30b0\u30e9\u30d5\u3082\u3001\u3088\u304f\u76ee\u306b\u3059\u308b\u3053\u3068\u304c\u591a\u3044\u6709\u540d\u306a\u30b0\u30e9\u30d5\u3067\u3059\u3002\u82f1\u8a9e\u3067\u306fStacked Charts\u3068\u547c\u3070\u308c\u307e\u3059\u3002
D3\u306f\u3001d3.stack()\u306b\u3088\u3063\u3066\u7c21\u5358\u306b\u7a4d\u307f\u4e0a\u3052\u30b0\u30e9\u30d5\u3092\u4f5c\u6210\u3059\u308b\u3053\u3068\u3092\u53ef\u80fd\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n

\u7a4d\u307f\u4e0a\u3052\u30b0\u30e9\u30d5\u306e\u4f5c\u6210<\/h1>\n\n\n\n

\u753b\u9762\u306e\u30b5\u30a4\u30ba\u3068dataset\u3092\u5ba3\u8a00\u3057\u307e\u3059\u3002\u3053\u3053\u3067\u306f\u3001\u7a4d\u307f\u4e0a\u3052\u30b0\u30e9\u30d5\u306e\u5834\u5408\u306f\u9023\u60f3\u914d\u5217\u306b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

\/\/\u753b\u9762\u306e\u5e45\u3068\u9ad8\u3055\nvar w = 500;\nvar h = 300;\n\n\/\/\u30b9\u30bf\u30c3\u30af\uff08\u7a4d\u307f\u4e0a\u3052\uff09\u7528\u306e\u30c7\u30fc\u30bf\u30bb\u30c3\u30c8\nvar dataset = [\n   { apple: 5, kiwi: 10, banana: 22 },\n   { apple: 4, kiwi: 12, banana: 28 },\n   { apple: 2, kiwi: 19, banana: 32 },\n   { apple: 7, kiwi: 23, banana: 35 },\n   { apple: 23, kiwi: 17, banana: 43 }\n];\n<\/code><\/pre>\n\n\n\n
\u30b9\u30bf\u30c3\u30af\u95a2\u6570\u3092\u5b9a\u7fa9\u3057\u3001\u30c7\u30fc\u30bf\u3092\u7a4d\u307f\u4e0a\u3052\u305f\u72b6\u614b\u306e\u914d\u5217series\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\/\/\u30b9\u30bf\u30c3\u30af\u95a2\u6570\u306e\u8a2d\u5b9a\nvar stack = d3.stack()\n           .keys([ \"apple\", \"kiwi\", \"banana\" ]);   \/\/\u30ad\u30fc\u3092\u767b\u9332\n\n\/\/\u30c7\u30fc\u30bf\u3092\u7a4d\u307f\u4e0a\u3052\u305f\u72b6\u614b\u306e\u914d\u5217\u3092\u4f5c\u308b\u3002\nvar series = stack(dataset);<\/code><\/pre>\n\n\n\n
\u3053\u3053\u3067\u3001series\u306e\u4e2d\u8eab\u3092chrome\u30c7\u30d9\u30ed\u30c3\u30d1\u30fc\u30c4\u30fc\u30eb\u3067\u78ba\u8a8d\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002\u914d\u5217\u306e\u4e2d\u306b\u914d\u5217\u304c\u5165\u3063\u3066\u3044\u308b\u8907\u96d1\u306a\u69cb\u9020\u3067\u3059\u304c\u3001\u4e8c\u6b21\u5143\u914d\u5217\u306e\u5909\u5f62\u7248\u3068\u3044\u3063\u3066\u3044\u3044\u3067\u3057\u3087\u3046\u3002\u57fa\u672c\u7684\u306b\u306fseries[3][5]\u3068\u540c\u3058\u69cb\u9020\u3092\u3057\u3066\u3044\u307e\u3059\u3002\u3053\u306e\u30c7\u30fc\u30bf\u306bxScale\u3068yScale\u3092\u9069\u7528\u3059\u308c\u3070\u3001\u305d\u308c\u305e\u308c\u306erect\u306e\u5ea7\u6a19\u304c\u7b97\u51fa\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
\u305d\u308c\u3067\u306f\u3001\u30b9\u30b1\u30fc\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002yScale\u306f\u3001apple\u3001kiwi\u3001banana\u306e\u30d0\u30fc\u306e\u9ad8\u3055\u306e\u6700\u5927\u5024\u3092\u6c42\u3081\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
\/\/x\u30b9\u30b1\u30fc\u30eb\u3092\u4f5c\u6210\nvar xScale = d3.scaleBand()\n   .domain(d3.range(dataset.length))\n   .range([0, w])\n   .paddingInner(0.05);\n\n\/\/y\u30b9\u30b1\u30fc\u30eb\u3067\u306f\u3001\u30d0\u30fc\u306e\u9ad8\u3055\u306e\u6700\u5927\u5024\u3092\u8a08\u7b97\u3059\u308b\u3002\nvar yScale = d3.scaleLinear()\n   .domain([0,\n      d3.max(dataset, function(d) {\n         return d.apple + d.kiwi + d.banana;\n      })\n   ])\n   .range([0, h]);<\/code><\/pre>\n\n\n\n
\u8272\u3092\u5ba3\u8a00\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\/\/3\u8272\u304c\u9806\u756a\u306b\u4e26\u3093\u3067\u3044\u308b\u914d\u5217\nvar colors = d3.scaleOrdinal()\n              .range([\"#FF0000\", \"#00FF00\", \"#FFFF00\"]);<\/code><\/pre>\n\n\n\n
SVG\u8981\u7d20\u3092\u4f5c\u6210\u3057\u3001\u3055\u3089\u306b\u884c\u3054\u3068\u306e\u30c7\u30fc\u30bf\u306e\u305f\u3081\u306bg\uff08\u30b0\u30eb\u30fc\u30d7\uff09\u8981\u7d20\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u3053\u306e3\u3064\u306eg\u306e\u4e2d\u306bapple\u3001kiwi\u3001banana\u7528\u306e\u30d0\u30fc\u3092\u4f5c\u6210\u3059\u308b\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
\/\/SVG\u8981\u7d20\u3092\u4f5c\u6210\nvar svg = d3.select(\"body\")\n         .append(\"svg\")\n         .attr(\"width\", w)\n         .attr(\"height\", h);\n\n\/\/ \u884c\u3054\u3068\u306e\u30c7\u30fc\u30bf\u306e\u305f\u3081\u306b\u30b0\u30eb\u30fc\u30d7\u3092\u4f5c\u6210\nvar groups = svg.selectAll(\"g\")\n   .data(series)\n   .enter()\n   .append(\"g\")\n   .style(\"fill\", function(d, i) {\n      return colors(i);\n   });<\/code><\/pre>\n\n\n\n
\u305d\u308c\u305e\u308c\u306e\u30c7\u30fc\u30bf\u306b\u5bfe\u5fdc\u3057\u305frect\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
var rects = groups.selectAll(\"rect\")\n   .data(function(d) { return d; })\n   .enter()\n   .append(\"rect\")\n   .attr(\"x\", function(d, i) {\n      return xScale(i);\n   })\n   .attr(\"y\", function(d) {\n      return yScale(d[0]);  \/\/\u30d0\u30fc\u306e\u4e0b\u8fba\u306ey\u5ea7\u6a19\n   })\n   .attr(\"height\", function(d) {\n      return yScale(d[1]) - yScale(d[0]);  \/\/ \u9ad8\u3055\u3092\u8a08\u7b97\n   })\n   .attr(\"width\", xScale.bandwidth());<\/code><\/pre>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
\u7a4d\u307f\u4e0a\u3052\u30b0\u30e9\u30d5\u306e\u9806\u756a\u3092\u5909\u3048\u308b<\/h1>\n\n\n\n
\u7a4d\u307f\u4e0a\u3052\u308b\u9806\u3092\u5909\u3048\u308b\u306e\u306f\u7c21\u5358\u3067\u3059\u3002\u30b9\u30bf\u30c3\u30af\u95a2\u6570\u306e\u8a2d\u5b9a\u3092\u964d\u9806\u306b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\/\/\u30b9\u30bf\u30c3\u30af\u95a2\u6570\u306e\u8a2d\u5b9a\nvar stack = d3.stack()\n           .keys([ \"apple\", \"kiwi\", \"banana\" ])   \/\/\u30ad\u30fc\u3092\u767b\u9332\n           .order(d3.stackOrderDescending);  \/\/ <-- \u964d\u9806\u306b\u5909\u66f4<\/code><\/pre>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
\u7a4d\u307f\u4e0a\u3052\u30b0\u30e9\u30d5\u3092\u53cd\u8ee2\u3055\u305b\u308b<\/h1>\n\n\n\n
\u3053\u306e\u307e\u307e\u3060\u3068\u7a4d\u307f\u4e0b\u304c\u3063\u305f\u307e\u307e\u306a\u306e\u3067\u3001\u4e0a\u4e0b\u3092\u53cd\u8ee2\u3055\u305b\u307e\u3059\u3002
yScale\u306erange\u3092\u53cd\u8ee2\u3055\u305b\u307e\u3059\u3002<\/p>\n\n\n\n
\/\/y\u30b9\u30b1\u30fc\u30eb\u3067\u306f\u3001\u30d0\u30fc\u306e\u9ad8\u3055\u306e\u6700\u5927\u5024\u3092\u8a08\u7b97\u3059\u308b\u3002\nvar yScale = d3.scaleLinear()\n   .domain([0,\n      d3.max(dataset, function(d) {\n         return d.apple + d.kiwi + d.banana;\n      })\n   ])\n   .range([h, 0]);  \/\/\u30b9\u30b1\u30fc\u30eb\u3092\u53cd\u8ee2\u3059\u308b\u3002<\/code><\/pre>\n\n\n\n
rect\u306ey\u5ea7\u6a19\u3068\u9ad8\u3055\u3082\u53cd\u8ee2\u3055\u305b\u307e\u3059\u3002<\/p>\n\n\n\n
.attr(\"y\", function(d) {\n   return yScale(d[1]);  \/\/\u30d0\u30fc\u306e\u4e0b\u8fba\u306ey\u5ea7\u6a19\n})\n.attr(\"height\", function(d) {\n   return yScale(d[0]) - yScale(d[1]);  \/\/ \u9ad8\u3055\u3092\u8a08\u7b97\n})<\/code><\/pre>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n

stack<\/a>\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/a><\/div>\n\n\n\n
stack_v7<\/a>\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
\u7a4d\u307f\u4e0a\u3052\u30b0\u30e9\u30d5\u3082\u3001\u3088\u304f\u76ee\u306b\u3059\u308b\u3053\u3068\u304c\u591a\u3044\u6709\u540d\u306a\u30b0\u30e9\u30d5\u3067\u3059\u3002\u82f1… Read more »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35,27],"tags":[],"class_list":["post-8777","post","type-post","status-publish","format-standard","hentry","category-d3-js","category-27"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/posts\/8777","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/comments?post=8777"}],"version-history":[{"count":7,"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/posts\/8777\/revisions"}],"predecessor-version":[{"id":12858,"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/posts\/8777\/revisions\/12858"}],"wp:attachment":[{"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/media?parent=8777"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/categories?post=8777"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/r-dimension.xsrv.jp\/classes_j\/wp-json\/wp\/v2\/tags?post=8777"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}