Using pure Ember to create SVG chart with transition effect

I'm trying approach in this link D3 and React - the future of charting components? to create some charting components without using d3 to generate svg elements.

Now I could do the most simplest case: if I have an array [1, 1, 1], I will get a series of bars with height equal to 1. When I change the array to [2, 2, 2], I get a series of new bars with height equal to 2 instantly.

What I want to have is, when I change data array, the bar could change height with an animation effect. For the above input, the second time height of each bar would grow from 1 to 2.

Inside my component I use each to iterate through values

{{#my-svg}}
  {{#each values as |v|}}
    {{my-rect height=v ........}}   // my own component
  {{/each}}
{{/my-svg}

It looks like Ember will destroy and recreate all rects instead of change their height property. Therefore my css transition property no longer works. (It works if I only have one <rect>)

Another way in my mind is adding oldHeight newHeight for each bar, use other jquery library to change height with transition based on those two values. But if that so I need to run this function for every bar, which sounds very slow. I'm wondering is there any better to achieve it.