{"id":2785,"date":"2013-04-30T11:36:21","date_gmt":"2013-04-30T02:36:21","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=2785"},"modified":"2014-08-06T16:00:47","modified_gmt":"2014-08-06T07:00:47","slug":"post-2785","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/d3-js\/2785","title":{"rendered":"\u3010D3.js\u3011\u9078\u629e\u3055\u308c\u305f\u30c7\u30fc\u30bf\u7bc4\u56f2\u306e\u30b0\u30e9\u30d5\u3092\u8868\u793a\u3059\u308b(d3.svg.brush)"},"content":{"rendered":"

\"d3.svg.brush\"<\/a><\/p>\n

\u4e0b\u4f4d\u306e\u30b0\u30e9\u30d5\u3067\u9078\u629e\u3055\u308c\u305f\u7bc4\u56f2\u3092\u4e0a\u4f4d\u306e\u30b0\u30e9\u30d5\u3067\u62e1\u5927\u8868\u793a\u3057\u307e\u3059\u3002
\n\u8907\u96d1\u306a\u3053\u3068\u3092\u3084\u3063\u3066\u3044\u308b\u3088\u3046\u306b\u898b\u3048\u307e\u3059\u304c\u3001D3.js\u3067\u306f\u6bd4\u8f03\u7684\u7c21\u5358\u306b\u5b9f\u88c5\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n

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

\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9<\/h2>\n

\u30c7\u30fc\u30bf\u7bc4\u56f2\u306e\u9078\u629e\u6a5f\u80fd\u3092\u8ffd\u52a0\u3059\u308b\u305f\u3081\u306bd3.svg.brush()<\/a>\u3092\u4f7f\u7528\u3057\u3066\u3044\u307e\u3059\u3002
\n\u30d8\u30eb\u30d1\u30fc\u95a2\u6570\u3068\u3057\u3066\u3001\u3053\u3061\u3089<\/a>\u306e\u8a18\u4e8b\u3067\u4f5c\u6210\u3057\u305f\u95a2\u6570\u3092\u4f7f\u7528\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n

\r\nd3.csv(\"access.csv\", function(data){\r\n    var parseDate = d3.time.format(\"%Y\/%m\/%d\").parse; \r\n\r\n    \/\/\u30c7\u30fc\u30bf\u30bb\u30c3\u30c8\u578b\u5909\u63db\r\n      data.forEach(function(d) {\r\n        d.date = parseDate(d.date);\r\n        d.access = parseInt(d.access);\r\n      });\r\n\r\n    var dateExtent = d3.extent( data.map( F('date') ) ); \/\/date\u306e\u6700\u5c0f\u5024\u30fb\u6700\u5927\u5024\u53d6\u5f97\r\n    var accessMax =  d3.max( data.map( F('access') ) ); \/\/access\u306e\u6700\u5927\u5024\u53d6\u5f97\r\n\r\n    \/\/\u4e0a\u4f4d\u30b0\u30e9\u30d5\u7528\u3001margin, scale, axis\u8a2d\u5b9a\r\n    var margin = {top: 10, right: 10, bottom: 100, left: 40};\r\n    var width = 960 - margin.left - margin.right;\r\n    var height = 500 - margin.top - margin.bottom;\r\n    var xScale = d3.time.scale()\r\n      .domain(dateExtent)    \r\n      .range([0, width]);\r\n    var yScale = d3.scale.linear()\r\n    .domain([0, accessMax])\r\n    .range([height, 0]);\r\n    var xAxis = d3.svg.axis().scale(xScale).orient(\"bottom\");\r\n    var yAxis = d3.svg.axis().scale(yScale).orient(\"left\");\r\n\r\n    \/\/\u4e0b\u4f4d\u30b0\u30e9\u30d5\u7528\u3001margin, scale, axis\u8a2d\u5b9a\r\n    var margin2 = {top: 430, right: 10, bottom: 20, left: 40}; \r\n    var height2 = 500 - margin2.top - margin2.bottom;     \r\n    var x2Scale = d3.time.scale()\r\n      .domain(xScale.domain())\r\n      .range([0, width]);  \r\n    var y2Scale = d3.scale.linear()\r\n      .domain(yScale.domain())\r\n      .range([height2, 0]);    \r\n    var xAxis2 = d3.svg.axis().scale(x2Scale).orient(\"bottom\"); \r\n    \r\n\r\n    \/\/\u4e0a\u4f4d\u30b0\u30e9\u30d5area\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\r\n    var area = d3.svg.area()\r\n        .interpolate(\"monotone\")\r\n        .x(F('date', xScale))\r\n        .y0(height)\r\n        .y1(F('access', yScale));\r\n\r\n    \/\/\u4e0b\u4f4d\u30b0\u30e9\u30d5area\u30aa\u30d6\u30b8\u30a7\u30af\u30c8    \r\n    var area2 = d3.svg.area()\r\n        .interpolate(\"monotone\")\r\n        .x(F('date', x2Scale))\r\n        .y0(height2)\r\n        .y1(F('access', y2Scale));\r\n  \r\n    \/\/\u30b9\u30c6\u30fc\u30b8\u4f5c\u6210\r\n    var svg = d3.select(\"body\").append(\"svg\")\r\n        .attr(\"width\", width + margin.left + margin.right)\r\n        .attr(\"height\", height + margin.top + margin.bottom);\r\n    \r\n    \/\/\u30d5\u30a9\u30fc\u30ab\u30b9\u6642\u306e\u4e0a\u4f4d\u30b0\u30e9\u30d5\u306e\u8868\u793a\u4f4d\u7f6e\u8abf\u6574\u306e\u305f\u3081\u306b\u30af\u30ea\u30c3\u30d7\u30d1\u30b9\u3092\u4f5c\u6210\r\n    svg.append(\"defs\").append(\"clipPath\")\r\n        .attr(\"id\", \"clip\")\r\n        .append(\"rect\")\r\n        .attr(\"width\", width)\r\n        .attr(\"height\", height);\r\n  \r\n  \r\n    \r\n    var focus = svg.append(\"g\") \/\/\u4e0a\u4f4d\u30b0\u30e9\u30d5\u30b0\u30eb\u30fc\u30d7\u4f5c\u6210\r\n        .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\r\n    \r\n    var context = svg.append(\"g\") \/\/\u4e0b\u4f4d\u30b0\u30e9\u30d5\u30b0\u30eb\u30fc\u30d7\u4f5c\u6210\r\n        .attr(\"transform\", \"translate(\" + margin2.left + \",\" + margin2.top + \")\");\r\n    \r\n       \r\n      focus.append(\"path\")\r\n          .datum(data)\r\n          .attr(\"clip-path\", \"url(#clip)\") \/\/\u30af\u30ea\u30c3\u30d7\u30d1\u30b9\u3092\u9069\u7528\r\n          .attr(\"d\", area);\r\n        \r\n      focus.append(\"g\")  \/\/x\u76ee\u76db\u8ef8\r\n          .attr(\"class\", \"x axis\")\r\n          .attr(\"transform\", \"translate(0,\" + height + \")\")\r\n          .call(xAxis);\r\n    \r\n      focus.append(\"g\") \/\/y\u76ee\u76db\u8ef8\r\n          .attr(\"class\", \"y axis\")\r\n          .call(yAxis);\r\n \r\n \r\n      context.append(\"path\") \/\/\u4e0b\u4f4d\u30b0\u30e9\u30d5\r\n          .datum(data)\r\n          .attr(\"d\", area2);\r\n\r\n      context.append(\"g\") \/\/\u4e0b\u4f4dx\u76ee\u76db\u8ef8\r\n          .attr(\"class\", \"x axis\")\r\n          .attr(\"transform\", \"translate(0,\" + height2 + \")\")\r\n          .call(xAxis2);\r\n \r\n \r\n    \/*\r\n     *brush\u306f\u900f\u660e\u306arect\u3092\u30b0\u30eb\u30fc\u30d7\u4e0a\u8a2d\u7f6e\u3057\u30de\u30a6\u30b9\u30a4\u30d9\u30f3\u30c8\u3092\u53d6\u5f97\u3059\u308b\u3002\r\n     *\u8a2d\u7f6e\u3057\u305frect\u4e0a\u3067\u306f\u30c9\u30e9\u30c3\u30b0\u3067\u7bc4\u56f2\u9078\u629e\u304c\u53ef\u80fd\r\n     *\u7bc4\u56f2\u304c\u9078\u629e\u3055\u308c\u3066\u3044\u308b\u72b6\u614b\u3067brush.extent()\u30e1\u30bd\u30c3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u3068\u305d\u306e\u7bc4\u56f2\u306e\u30c7\u30fc\u30bf\u5024\u3092\u8fd4\u3059\r\n     *\/\r\n    \r\n     var brush = d3.svg.brush() \/\/brush\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u4f5c\u6210\r\n        .x(x2Scale) \/\/x\u8ef8\u3092\u9078\u629e\u53ef\u80fd\u7bc4\u56f2\u306b\u6307\u5b9a\r\n        .on(\"brush\", brushed);\r\n    \r\n      context.append(\"g\") \/\/brush\u30b0\u30eb\u30fc\u30d7\u3092\u4f5c\u6210\r\n        .attr(\"class\", \"x brush\")\r\n        .call(brush)\r\n        .selectAll(\"rect\")\r\n        .attr(\"y\", -6)\r\n        .attr(\"height\", height2 + 7);\r\n\r\n    \r\n    function brushed() {\r\n      console.log( brush.extent());\r\n      xScale.domain(brush.empty() ? x2Scale.domain() : brush.extent()); \/\/\u9078\u629e\u3055\u308c\u305f\u30c7\u30fc\u30bf\u30bb\u30c3\u30c8\u306e\u7bc4\u56f2\u3092xScale\u306edomain\u306b\u53cd\u6620\r\n      focus.select(\"path\").attr(\"d\", area); \/\/\u4e0a\u4f4d\u30b0\u30e9\u30d5\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\r\n      focus.select(\".x.axis\").call(xAxis); \/\/\u4e0a\u4f4dx\u8ef8\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\r\n    }\r\n\r\n});\r\n<\/pre>\n
example<\/a><\/p>\n
\u3061\u3087\u3063\u3068\u3060\u3051\u89e3\u8aac<\/h2>\n
var brush = d3.svg.brush() \/\/brush\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u4f5c\u6210\r\n    .x(x2Scale) \/\/x\u8ef8\u3092\u9078\u629e\u53ef\u80fd\u7bc4\u56f2\u306b\u6307\u5b9a\r\n    .on(\"brush\", brushed);\r\n<\/pre>\n
brush\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306f\u3001\u30b0\u30e9\u30d5\u4e0a\u306b\u30de\u30a6\u30b9\u30c9\u30e9\u30c3\u30b0\u3067\u7bc4\u56f2\u9078\u629e\u3092\u884c\u3046\u6a5f\u80fd\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002
\n\u9078\u629e\u5bfe\u8c61\u306fx\u30e1\u30bd\u30c3\u30c9\u3001y\u30e1\u30bd\u30c3\u30c9\u306bscale\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u6e21\u3059\u3053\u3068\u3067\u8a2d\u5b9a\u3057\u307e\u3059\u3002
\n(x\u30e1\u30bd\u30c3\u30c9\u3060\u3051\u3060\u3068\u6a2a\u8ef8\u306e\u307f\u3001x,y\u4e21\u30e1\u30bd\u30c3\u30c9\u306b\u30b9\u30b1\u30fc\u30eb\u304c\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u308b\u5834\u5408\u306f\u7e26\u6a2a\u306e\u9078\u629e\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059)
\nbrush\u30a4\u30d9\u30f3\u30c8\u306f\u9078\u629e\u6642\u306b\u547c\u3070\u308c\u307e\u3059\u3002<\/p>\n
function brushed() {\r\n\t\/\/\u9078\u629e\u3055\u308c\u305f\u30c7\u30fc\u30bf\u30bb\u30c3\u30c8\u306e\u7bc4\u56f2\u3092xScale\u306edomain\u306b\u53cd\u6620\r\n\txScale.domain(brush.empty() ? x2Scale.domain() : brush.extent()); \r\n\tfocus.select(\"path\").attr(\"d\", area); \/\/\u4e0a\u4f4d\u30b0\u30e9\u30d5\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\r\n\tfocus.select(\".x.axis\").call(xAxis); \/\/\u4e0a\u4f4dx\u8ef8\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\r\n}\r\n<\/pre>\n
brush\u30a4\u30d9\u30f3\u30c8\u306b\u3088\u3063\u3066\u547c\u3070\u308c\u305f\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u306e\u4e2d\u3067\u306f\u3001brush.extent()\u30e1\u30bd\u30c3\u30c9\u306b\u3088\u3063\u3066\u9078\u629e\u3055\u308c\u305f\u30c7\u30fc\u30bf\u5024\u3092\u53d6\u5f97\u3057\u3001\u305d\u306e\u5024\u3067xScale\u306e\u30c9\u30e1\u30a4\u30f3\u3092\u66f4\u65b0\u3057\u307e\u3059\u3002
\nxScale\u304c\u9069\u7528\u3055\u308c\u3066\u3044\u308b\u4e0a\u4f4d\u30b0\u30e9\u30d5\u3068\u4e0a\u4f4dx\u8ef8(xaxis)\u306e\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u3092\u884c\u3046\u3053\u3068\u3067\u3001\u4e0b\u4f4d\u30b0\u30e9\u30d5\u3067\u9078\u629e\u3055\u308c\u305f\u7bc4\u56f2\u306e\u30c7\u30fc\u30bf\u3092\u4e0a\u4f4d\u30b0\u30e9\u30d5\u4e0a\u3067\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u4e0b\u4f4d\u306e\u30b0\u30e9\u30d5\u3067\u9078\u629e\u3055\u308c\u305f\u7bc4\u56f2\u3092\u4e0a\u4f4d\u306e\u30b0\u30e9\u30d5\u3067\u62e1\u5927\u8868…<\/p>\n","protected":false},"author":1,"featured_media":2786,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-2785","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\/2785","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=2785"}],"version-history":[{"count":1,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/2785\/revisions"}],"predecessor-version":[{"id":3247,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/2785\/revisions\/3247"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/2786"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=2785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=2785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=2785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}