{"id":5144,"date":"2016-10-13T10:22:33","date_gmt":"2016-10-13T01:22:33","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=5144"},"modified":"2016-10-13T10:22:33","modified_gmt":"2016-10-13T01:22:33","slug":"post-5144","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/d3v4\/5144","title":{"rendered":"\u3010D3.js\u3011Axis(\u8ef8)\u3092\u53ef\u5909\u3055\u305b\u308b\uff12\u7a2e\u985e\u306e\u65b9\u6cd5\u3002"},"content":{"rendered":"<p><a href=\"http:\/\/bl.ocks.org\/shimizu\/914c769f05f1b2e1d09428c7eedd7f8a\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2016\/10\/D3-ver.4-Axis-Update-Example-bl.ocks_.org-2016-10-13-10-20-05.png\" alt=\"d3.js ver.4 axis update example\" width=\"590\" height=\"306\" class=\"aligncenter size-full wp-image-5159\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2016\/10\/D3-ver.4-Axis-Update-Example-bl.ocks_.org-2016-10-13-10-20-05.png 590w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2016\/10\/D3-ver.4-Axis-Update-Example-bl.ocks_.org-2016-10-13-10-20-05-289x150.png 289w\" sizes=\"auto, (max-width: 590px) 100vw, 590px\" \/><\/a><\/p>\n<p>D3\u3067\u4f5c\u6210\u3057\u305f\u8ef8\u306e\u5024\u3092\u5909\u66f4\u3057\u3066\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u3059\u308b\u65b9\u6cd5\u3067\u3059\u3002<br \/>\n\u57fa\u672c\u7684\u306b\u306f\u3001\u30b9\u30b1\u30fc\u30eb\u306e\u30c9\u30e1\u30a4\u30f3\u3092\u5909\u66f4\u3057\u3066Axis\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u6e21\u3057\u3066\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u3059\u308b\u3060\u3051\u3067\u3059\u3002<\/p>\n<h3>\u30b5\u30f3\u30d7\u30eb\uff11<\/h3>\n<p>axis\u8981\u7d20\u3092\u8ffd\u52a0\u3059\u308b\u521d\u671f\u5316\u51e6\u7406\u3068\u3001\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u51e6\u7406\u3092\u5206\u96e2\u3057\u305f\u30aa\u30fc\u30bd\u30c9\u30c3\u30af\u30b9\u306a\u65b9\u6cd5\u3002 initAxis\u306e\u524d\u306bupdateAxis\u304c\u5b9f\u884c\u3055\u308c\u308b\u3068\u5f53\u7136\u306a\u304c\u3089\u30a8\u30e9\u30fc\u306b\u306a\u308b\u3002 Axis\u3092\u8907\u6570\u8868\u793a\u3057\u306a\u304f\u3066\u306f\u306a\u3089\u306a\u3044\u30b1\u30fc\u30b9\u306a\u3069\u3067\u306f\u3001init\uff0fupdate\u306e\u30bb\u30c3\u30c8\u3092\u8907\u6570\u7ba1\u7406\u3057\u306a\u304f\u3066\u306f\u306a\u3089\u306a\u3044\u305f\u3081\u8907\u96d1\u5316\u3057\u3084\u3059\u3044\u3002<\/p>\n<pre class=\"lang:js decode:true \" >var width = 900\r\nvar height = 235\r\nvar margin = {top:50, left:50, bottom:50, right:50 }\r\n\r\nvar svg = d3.select(\"#example1\")\r\n            \r\nvar xScale = d3.scaleLinear()\r\nvar yScale = d3.scaleLinear()\r\n    \r\nvar xAxisCall = d3.axisBottom()\r\nvar yAxisCall = d3.axisLeft()\r\n\r\n\r\nsetScale1()\r\ninitAxis()  \/\/axis\u306e\u521d\u671f\u5316\r\n\r\n\r\nsetInterval(toggle(\r\n    function(){\r\n        setScale2()\r\n        updateAxis() \/\/axis\u3092\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\r\n    },\r\n    function(){\r\n        setScale1()\r\n        updateAxis() \/\/axis\u3092\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\r\n    \r\n    }), 2000)\r\n\r\nfunction setScale1(){\r\n    xScale.domain([0, 1000]).range([0, width-(margin.top+margin.bottom)])\r\n    yScale.domain([0, 1000]).range([height-(margin.top+margin.bottom), 0])\r\n    xAxisCall.scale(xScale)\r\n    yAxisCall.scale(yScale)    \r\n}\r\n\r\nfunction setScale2(){\r\n    xScale.domain([0, 100]).range([0, width-(margin.top+margin.bottom)])\r\n    yScale.domain([0, 100]).range([height-(margin.top+margin.bottom), 0])\r\n    xAxisCall.scale(xScale)\r\n    yAxisCall.scale(yScale)\r\n}\r\n\r\n\/\/axis\u3092\u63cf\u753b\u3059\u308bsvg\u8981\u7d20\u3092\u8ffd\u52a0\u3059\u308b\r\nfunction initAxis() {\r\n    svg.append(\"g\")\r\n        .attr(\"class\", \"x axis\")\r\n        .attr(\"transform\", \"translate(\"+[margin.left, height-margin.top]+\")\")\r\n        .call(xAxisCall)\r\n    \r\n    svg.append(\"g\")\r\n        .attr(\"class\", \"y axis\")\r\n        .attr(\"transform\", \"translate(\"+[margin.left, margin.top]+\")\")\r\n        .call(yAxisCall)\r\n}\r\n\r\n\/\/axis\u3092\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u3059\u308b    \r\nfunction updateAxis(){\r\n    var t = d3.transition()\r\n        .duration(500)\r\n    \r\n    svg.select(\".x\")\r\n        .transition(t)\r\n        .call(xAxisCall)\r\n    \r\n    svg.select(\".y\")\r\n        .transition(t)\r\n        .call(yAxisCall)\r\n    \r\n}  <\/pre>\n<h3>\u30b5\u30f3\u30d7\u30eb\uff12<\/h3>\n<p>\u521d\u671f\u5316\u3068\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u306e\u51e6\u7406\u3092D3\u306e\u30c7\u30fc\u30bf\u30c9\u30ea\u30d6\u30f3\u6a5f\u80fd\u3092\u5229\u7528\u3057\u3066\u307e\u3068\u3081\u305f\u4f8b\u3002 drawAxis\u306f\u3001Axis\u304c\u5b58\u5728\u3057\u306a\u3044\u5834\u5408\u306f\u8981\u7d20\u3092\u8ffd\u52a0\u3057\u3066\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u3001\u3059\u3067\u306b\u8981\u7d20\u304c\u5b58\u5728\u3057\u3066\u3044\u308b\u5834\u5408\u306f\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u306e\u307f\u3092\u884c\u3046\u305f\u3081\u3001\u521d\u671f\u5316\u3068\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u3092\u500b\u5225\u306b\u8003\u3048\u306a\u304f\u3066\u3088\u3044\u3002 <\/p>\n<pre class=\"lang:js decode:true \" >var width = 900\r\nvar height = 235\r\nvar margin = {top:50, left:50, bottom:50, right:50 }\r\n\r\nvar svg = d3.select(\"#example2\")\r\n        \r\nvar xScale = d3.scaleLinear()\r\nvar yScale = d3.scaleLinear()\r\n\r\nvar xAxisCall = d3.axisBottom()\r\nvar yAxisCall = d3.axisLeft()\r\n    \r\nsetScale1()\r\ndrawAxis()\r\n\r\nsetInterval(toggle(\r\n    function(){\r\n        setScale2()\r\n        drawAxis()\r\n    },\r\n    function(){\r\n        setScale1()\r\n        drawAxis()\r\n    \r\n    }), 2000)\r\n\r\nfunction setScale1(){\r\n    xScale.domain([0, 1000]).range([0, width-(margin.top+margin.bottom)])\r\n    yScale.domain([0, 1000]).range([height-(margin.top+margin.bottom), 0])\r\n    xAxisCall.scale(xScale)\r\n    yAxisCall.scale(yScale)    \r\n}\r\n\r\nfunction setScale2(){\r\n    xScale.domain([0, 100]).range([0, width-(margin.top+margin.bottom)])\r\n    yScale.domain([0, 100]).range([height-(margin.top+margin.bottom), 0])\r\n    xAxisCall.scale(xScale)\r\n    yAxisCall.scale(yScale)\r\n}\r\n\r\n        \r\nfunction drawAxis(){\r\n    var t = d3.transition()\r\n        .duration(500)\r\n    \r\n    var x = svg.selectAll(\".x\")\r\n        .data([\"dummy\"])\r\n        \r\n    var newX = x.enter().append(\"g\")\r\n        .attr(\"class\", \"x axis\")\r\n        .attr(\"transform\", \"translate(\"+[margin.left, height-margin.top]+\")\")\r\n\r\n    x.merge(newX).transition(t).call(xAxisCall)\r\n\r\n    var y = svg.selectAll(\".y\")\r\n        .data([\"dummy\"])\r\n        \r\n    var newY = y.enter().append(\"g\")\r\n        .attr(\"class\", \"y axis\")\r\n        .attr(\"transform\", \"translate(\"+[margin.left, margin.top]+\")\")\r\n\r\n    y.merge(newY).transition(t).call(yAxisCall)\r\n    \r\n    \r\n}    <\/pre>\n<p><a href=\"http:\/\/bl.ocks.org\/shimizu\/914c769f05f1b2e1d09428c7eedd7f8a\">example<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>D3\u3067\u4f5c\u6210\u3057\u305f\u8ef8\u306e\u5024\u3092\u5909\u66f4\u3057\u3066\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u3059\u308b\u65b9\u6cd5&hellip;<\/p>\n","protected":false},"author":1,"featured_media":5159,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[69],"tags":[],"class_list":["post-5144","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-d3v4","has-post-thumbnail-archive"],"_links":{"self":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/5144","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=5144"}],"version-history":[{"count":0,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/5144\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/5159"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=5144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=5144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=5144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}