D3 axis labels updated

Question

I have a graph in which I show two data sets in it. The user can press a button to switch to another data set. The problem is that the axes do not match, but when I want to update the ticks, instead I just lay on top of the other axis.

http://jsfiddle.net/scottieb/VjHd6/

The key bit is at the end:

vis.selectAll("axis").remove(); vis.append("svg:g") .attr("class", "x axis") .attr("transform", "translate(0, " + (h - margin ) + ")") .call(d3.svg.axis() .scale(x) .tickSize(0) .tickSubdivide(true) .tickFormat(formatCurrency) ); 

I tried selectAll ("g"). remove (), but this prevents the laying of the next axis. Any ideas?

Answer 1

Oops, you need to redefine the scale and trigger the transition, and not just build a new new axis.

http://jsfiddle.net/scottieb/JwaaV/

Answer 2

Your problem is that your selector is incorrect. Instead of choosing the "axis", you should choose the ".axis" as you add the "g" node with the class.