javascript - x-axis <g> tag transform not transitioning -

i have 2 x-axes on horizontal bar chart, , when created both given transform translates them vertically (.attr('transform', 'translate(0,' + (height - 5) + ')');). when data point removed, chart shrinks, changes height variable, changes transform. if try add transition, nothing happens. doesn't not animate, doesn't set transform. without animation @ least sets transform (just way early, looks weird else shrinking).

here's relevant code:

chart.select('.x-axis.top').transition().duration(1500)   .attr('transform', 'translate(0,' + (height - 5) + ')'); 

again, if remove .transition().duration(1500), transform @ least still changes.

update

while modifying lars kotthoff's jsfiddle match code i've been working on, figured out problem was. this:

svg.select('.x-axis')     .transition().duration(1500).attr("transform", "translate(0,100)"); svg.select('.x-axis')     .transition().duration(1500).call(axis); 

in order animate ticks of axes, running .call(axis) after data updated. code snippet obvious should try tack .call(axis) onto end of first call, , of course after worked.

this example bit contrived; in code i've been working on there's logic (that's turning off transitions when chart first initialized) seperates 2 functions.

i considered answering own question, while fix pretty quick , obvious, still think it's weird second call should prevent first 1 working correctly. question still stands, suppose, why doesn't seem work, instead of how fix it. here's updated jsfiddle shows problem.