D3 - axis data binding for scaling

Question

I want to switch between showing actual values ​​and percentages on a scale. Currently, the data is imported from the csv file, and I am processing csv to find the domain for the data and display the graph in order. I can switch to showing percent because the axis area becomes from 0 to 100, but I want to be able to return to the actual data domain without processing the csv file.

Is it possible to bind data to an axis so that I can get it? Something like that:

vis.append("g") .data([calculated_y_domain, [0, 100]]) .attr("class", "axis yaxis") .attr("transform", "translate("+padding+",0)") .call(yAxis); 

Or is there a better approach?

Here is an example of http://bl.ocks.org/3131368 which I am in the process of cleaning, but the way I do this will depend on the best approach for switching the axis.

Answer 1

You can create two axial components that use your two scales (percent and value) and the transition between the two axes when moving 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);