javascript - Unable to add transition in d3 -

i want add transition effect on vertical bar designed in d3. new d3,i have tried adding transition() method didn't quiet work. code follows-

svg.selectall(".bar")             .data(data)             .enter().append("g")             .attr("class", "bar")             .append("rect")             .attr("rx", barradius)             .attr("fill", function(d,i) {                  var drilledvalue;                     try {                         drilledvalue = json.parse(parent.$("#drills").val())[colids[0]];                     } catch (e) {                     }                     if (typeof drilledvalue !== 'undefined' && drilledvalue.length > 0 && drilledvalue.indexof(d[columns[0]]) !== -1) {                         return drillshade;                     }                 if(typeof chartdata[div]["transpose"] === "undefined" || chartdata[div]["transpose"]=='n')                 {                 return getdrawcolor(div, parseint(i));//"url(#gradientbar_" + (d[columns[0]]).replace(/[^a-za-z0-9]/g, '', 'gi') + ")";                 }                 else                 {                     return color(0);                 }             })             // .attr("color_value", "steelblue")             .attr("index_value", function(d, i) {                 return "index-" + d[columns[0]].replace(/[^a-za-z0-9]/g, '', 'gi');             })             .attr("class", function(d, i) {                 return "bars-bubble-index-" + d[columns[0]].replace(/[^a-za-z0-9]/g, '', 'gi')+div;             })             .attr("id", function(d) {                 return d[columns[0]] + ":" + d[measure1];             })             .attr("onclick", fun)             .attr("x", function(d) {                 return x(d[columns[0]]);             })             .attr("width", x.rangeband())             .attr("y", function(d) {                 return y(d[measure1]);             })             .attr("height", function(d) {                 return height - y(d[measure1]);             }); 

i want bar graph appear underneath 1 graph @ time. plz help.

without live example , bit hard you. but, having @ code, should put initial height @ 0 , set final height after transition :

svg.selectall(".bar") //all settings .attr("height",0) .transition() .duration(1000)//1 second .attr("height",function(d)( return height - y(d[measure1]);)); 

edit:

sorry, of course come top, need rotate bars. also, might have re-assess height calculation after applying rotation

svg.selectall(".bar")     //all settings     .attr("height",0)     .attr("transform", "rotate(180,x,y)"); //note y must bottom of chart     .transition()     .duration(1000)//1 second     .attr("height",function(d)( return height - y(d[measure1]);));