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.


Comments

Popular posts from this blog

How to connect android app to App engine -

gcc - MinGW's ld cannot perform PE operations on non PE output file -

php - display validation error message next to the textbox in codeigniter -