How to transition a y axis. Drawn initially with set values of 0 to 100. On clicking button the rescale function gets a random value for the end of the scale and redraws with an easing function.
See it running at http://bl.ocks.org/3098488
See also: http://bl.ocks.org/2983699
| <html> | |
| <head> | |
| <title>D3 Axis Example</title> | |
| <script src="http://d3js.org/d3.v2.js"></script> | |
| </head> | |
| <body> | |
| <button id="rescale" onclick="rescale();">Rescale</button> | |
| <script> | |
| var width = 700, | |
| height = 400, | |
| padding = 100; | |
| // create an svg container | |
| var vis = d3.select("body"). | |
| append("svg:svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| // define the y scale (vertical) | |
| var yScale = d3.scale.linear() | |
| .domain([0, 100]) // values between 0 and 100 | |
| .range([height - padding, padding]); // map these to the chart height, less padding. | |
| //REMEMBER: y axis range has the bigger number first because the y value of zero is at the top of chart and increases as you go down. | |
| // define the x scale (horizontal) | |
| var mindate = new Date(2012,0,1), | |
| maxdate = new Date(2012,0,31); | |
| var xScale = d3.time.scale() | |
| .domain([mindate, maxdate]) // values between for month of january | |
| .range([padding, width - padding * 2]); // map these the the chart width = total width minus padding at both sides | |
| // define the y axis | |
| var yAxis = d3.svg.axis() | |
| .orient("left") | |
| .scale(yScale); | |
| // define the x axis | |
| var xAxis = d3.svg.axis() | |
| .orient("bottom") | |
| .scale(xScale); | |
| // draw y axis with labels and move in from the size by the amount of padding | |
| vis.append("g") | |
| .attr("class", "yaxis") | |
| .attr("transform", "translate("+padding+",0)") | |
| .call(yAxis); | |
| // now add titles to the y axis | |
| vis.append("text") | |
| .attr("class", "yaxis_label") | |
| .attr("text-anchor", "middle") // this makes it easy to centre the text as the transform is applied to the anchor | |
| .attr("transform", "translate("+ (padding/2) +","+(height/2)+")rotate(-90)") // text is drawn off the screen top left, move down and out and rotate | |
| .text("Original Scale"); | |
| // draw x axis with labels and move to the bottom of the chart area | |
| vis.append("g") | |
| .attr("class", "xaxis") // give it a class so it can be used to select only xaxis labels below | |
| .attr("transform", "translate(0," + (height - padding) + ")") | |
| .call(xAxis); | |
| // now rotate text on x axis | |
| // solution based on idea here: https://groups.google.com/forum/?fromgroups#!topic/d3-js/heOBPQF3sAY | |
| // first move the text left so no longer centered on the tick | |
| // then rotate up to get 45 degrees. | |
| vis.selectAll(".xaxis text") // select all the text elements for the xaxis | |
| .attr("transform", function(d) { | |
| return "translate(" + this.getBBox().height*-2 + "," + this.getBBox().height + ")rotate(-45)"; | |
| }); | |
| function rescale() { | |
| yScale.domain([0,Math.floor((Math.random()*90)+11)]) // change scale to 0, to between 10 and 100 | |
| vis.select(".yaxis") | |
| .transition().duration(1500).ease("sin-in-out") // https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_ease | |
| .call(yAxis); | |
| vis.select(".yaxis_label") | |
| .text("Rescaled Axis"); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Thanks a lot! it's very useful to me.
Great work. Could you please update the tutorial to update the x-axis as well ? Thanks
I think you just saved me several hours of work, thanks!
Unfortunately that same trick doesn't seem to work with scaleOrdinal...
Thank you for putting this together! I've been working on something similar, and this example really solidified a couple of concepts for me.