d3 - attaching data to an axis for rescaling

Question

I want to switch between showing actual values and percentages on a scale. At present the data is imported from a csv file and I process the csv to find the domain for the

Answer 1

You could create two axis components which utilize your two scales (percentage and value), and transition between the two axes when you transition your data.

var xAxisValue = d3.svg.axis()
    .scale(valueScale)
    .orient("bottom");
var xAxisPercentage = d3.svg.axis()
    .scale(percentageScale)
    .orient("bottom");

d3.select("svg").append("g")
    .attr("class", "x-axis")
    .call(xAxisValue);

/* More code... */

// At the point you want to switch...
var dur = 1500;
d3.select(".x-axis").transition().duration(dur).call(xAxisPercentage);