Transition

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    .axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}
  </style>
</head>

<body>
 
</body>
  <script>
    var margin = {top: 20, right: 30, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

data=d3.text('stocks.csv', function(error,raw) {
     
    var dsv = d3.dsvFormat(',')
    var data_raw = dsv.parse(raw);
    
		data_raw.forEach(function(d){
      year=d.date[4]+d.date[5]+d.date[6]+d.date[7];
      d.date=year;
      d.price=+d.price;}) 
		var data=data_parser(data_raw);
    var data_transpose=transpose(data);
    var data_stack=format_dataset_to_stack(data); 
    
    var n=data[0].length ;
    var m=data.length;

}else if (state===1){
         d3.range(0,m).forEach(function(d,i){ 
         svg.select("g").select("g[id='id_"+i+"']").selectAll("rect")
				.transition()
      	.delay(0) 
      	.attr("y",function(d,i){return height-(i+1)*(height-margin.top-margin.bottom)/n;})
        .attr("height",(height-margin.top-margin.bottom)/n);});
           
 
       svg.selectAll("rect")  
        .transition() 
        .delay(500)
        .attr("width", x1.bandwidth())
       	.each(function(){console.log(this)});
                                               
                                
       d3.range(0,m).forEach(function(d,i){
        svg.selectAll("g").select("g[id='id_"+i+"']")
                .selectAll("rect")
          .transition()
        .delay(1000)

.attr("x", function(d,i) {console.log(this,i);return x0(i);});  });

svg.selectAll("rect") 
        .transition() 
           .delay(1500)
           .attr("y",function(d) { return (height-margin.bottom); });
           
       d3.range(0,m).forEach(function(d,i){
        svg.select("g").select("g[id='id_"+i+"']").selectAll("rect")
        .transition()
        .delay(2000)  
        .attr("fill", function() {return z(i); });});
        
      data.forEach(function(d,i){
       svg.select("g").select("g[id='id_"+i+"']").selectAll("rect")
         .data(d)  
         .transition() 
         .delay(2500)
         .attr("height", function(d,i){return y(d);})
       	 .attr("y", function(d) {return height-y(d); })});
  	state=0; }
	
   });

var y = d3.scaleLinear() 
    .domain([0, 210])
    .range([height, 0]);

var x0 = d3.scaleBand()
    .domain(d3.range(n))
    .range([0, width], .2);

var x1 = d3.scaleBand()
    .domain(d3.range(m))
    .range([0, x0.bandwidth() - 10]);
    
    var z = d3.scaleOrdinal(d3.schemeCategory20);
    
        
 
    		var x = d3.scaleBand()
      .domain(d3.range(m))
      .range([0, width-margin.left-margin.right])
      .paddingInner(0.05)
    	.paddingOuter(0.05);

var z2 = d3.scaleOrdinal() 
    .range(d3.schemeCategory20); 
       
    
    var y2 = d3.scaleLinear() 
    .domain([0, 1100])
    .rangeRound([height, 0]);

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  	.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//stacked_barChart(svg,data)
    
  function stacked_barChart(el,data){

var svg = el.append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  	.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g").selectAll("g")
    .data(d3.stack().keys(d3.range(n))(data))
  	.enter().append("g")
    .style("fill", function(d) {console.log(d) ; return z(d.key); })	 
    .selectAll("rect") 
  	.data(function(d) { console.log(d); return d; })
    .enter().append("rect") 
    .attr("x", function(d, i) {  return x(i); }) 
    .attr("y", function(d) {console.log(y(d[1])); return y(d[1]); }) 
    .attr("height", function(d) { return y(d[0]) - y(d[1]); })
    .attr("width", x.bandwidth());
  }
  })
     
    //Fonctions de mise en forme des données
    function data_parser(data){
      var symbols=[];
      var years=[];
      var formated_data=[];
      data.forEach(function(d){
        if (symbols.includes(d.symbol)===false){symbols.push(d.symbol);};
        if (years.includes(d.date)===false){years.push(d.date);};
      })
      for (var i=0;i<symbols.length;i++){
        formated_data.push([])
        for (var j=0;j<years.length;j++){
						formated_data[i].push(mean(data,years[j],symbols[i]));
        ;}      
       ;}  
     return formated_data;
    ;}
    
		function mean(data,year,symbol){
      var sum=0;
      var n=0;
      data.forEach(function(d){
        if (d.date===year && d.symbol===symbol)
        {sum=sum+d.price;n=n+1;};})
      return sum/n;}
    
    
    function transpose(data){
      var n=data[0].length ; 
      var m=data.length; 
      var new_data=[]; 
      var k=0;
      for (var i=0;i<n;i++){
        new_data.push([]);
        for (var j=m-1;j>=0;j--){
          new_data[i].push(data[j][i]);
        }
      }
      return new_data;
    }

function format_dataset_to_stack(dataset){
      var n=dataset.length;
      var output=[];
      for (var i=0;i<n;i++){
        output.push(format_to_stack(dataset[i]));
      }
      return output;
    }

function format_to_stack(data){
      var n=data.length;
      var output=[];
      output.push([0,data[0]])
      for (var i=1;i<n;i++){
        output.push([output[i-1][1],output[i-1][1]+data[i]]);
      }
      return output;
    }

</script>

https://d3js.org/d3.v4.min.js