call function after d3 transition

Question

Here is my codes:

var text = container.append('text');
text.text('text')
          .attr('transform',function(){
            return "translate(" + x1 + "," + y1 + ")"
          })
          .transition()
          .attr('transform',function(){
            return "translate(" + x2 + "," + y2 + ")";
          });
 addTextBackground(text);

Passing text to the function addTextBackground, I found the values in the transform attr were still x1, y1 rather than x2, y2. Seems addTextBackground is called before the transition. How can I make it called after the transition?

Thanks

Answer 1

I figured it out. Using each('end',callback) like:

text.text('text')
          .attr('transform',function(){
            return "translate(" + x1 + "," + y1 + ")"
          })
          .transition()
          .attr('transform',function(){
            return "translate(" + x2 + "," + y2 + ")";
          })
          .each('end',function(){addTextBackground(d3.select(this))});