D3 transition on bars inside popup

Question

I want D3 chart bars to load using smooth animation. For this I use transition D3. Although this method is usually great for charts on web pages, in the pop-up window that is called by clicking on the map leaflet; I do not get the desired results. bars are just loading. If I set a very high delay value, the first bar appears loaded, while the others load very slowly. This tells me that the animation already started on boot. I cannot get the chart to load using the animation inside the popup.

This is what I want to achieve, for example: http://jsfiddle.net/pg77k/10/

This is what I have so far: http://jsfiddle.net/Monduiz/rhn11gpk/

The code in my diagram where I draw a panel with a transition:

bar.append("rect")
    .attr("width", 0)
    .attr("height", barHeight - 1)
    .attr("fill", "#9D489A")
    .transition()
    .delay(function (d,i){ return i * 40;})
    .duration(350)
    .attr("width", function(d){return x(d.value);});

Answer 1

Move transitionto the popupopen callback.

Save the rectangles:

var rects = bar.append("rect")
  .attr("width", 0)
  .attr("height", barHeight - 1)
  .attr("fill", "#9D489A");

Further:

map.on('popupopen', function(e) {
    rects.transition()
      .delay(function (d,i){ return i * 40;})
      .duration(350)
      .attr("width", function(d){return x(d.value);});
});

Updated fiddle .