This example demonstrates the use of post-selection to customize an axis, even across transitions. After the axis is rendered, its elements (such as text labels, here) are reselected and modified to produce the desired appearance. When transitioning the axis, the post-selection modifies entering, updating and exiting elements. Passing null values to transition.tween cancels default tweens scheduled by the axis in favor of the customized styles.
-
-
Save chabb/a9c7cec8fcda9b4fdd46 to your computer and use it in GitHub Desktop.
Custom Axis
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .y.axis path { | |
| display: none; | |
| } | |
| .y.axis line { | |
| stroke: #777; | |
| stroke-dasharray: 2,2; | |
| } | |
| </style> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <script> | |
| var margin = {top: 20, right: 0, bottom: 20, left: 0}, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| var formatNumber = d3.format(".1f"); | |
| var y = d3.scale.linear() | |
| .domain([0, 1e6]) | |
| .range([height, 0]); | |
| var x = d3.time.scale() | |
| .domain([new Date(2010, 7, 1), new Date(2012, 7, 1)]) | |
| .range([0, width]); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .ticks(d3.time.years) | |
| .tickSize(6, 0) | |
| .orient("bottom"); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .tickSize(width) | |
| .tickFormat(formatCurrency) | |
| .orient("right"); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| var gy = svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis) | |
| .call(customAxis); | |
| var gx = svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| setTimeout(function() { | |
| y.domain([0, 3e6]); | |
| gy.transition() | |
| .duration(2500) | |
| .call(yAxis) | |
| .selectAll("text") // cancel transition on customized attributes | |
| .tween("attr.x", null) | |
| .tween("attr.dy", null); | |
| gy.call(customAxis); | |
| }, 1000); | |
| function customAxis(g) { | |
| g.selectAll("text") | |
| .attr("x", 114) | |
| .attr("dy", -4); | |
| g.selectAll("tick").attr("class",function(d,i){console.log(d,i);}); | |
| } | |
| function formatCurrency(d) { | |
| var s = formatNumber(d / 1e6); | |
| return d === y.domain()[1] | |
| ? "$" + s + " million" | |
| : s; | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment