d3 v3 not starting transition on g elements

Question

problem: moved from d3v2 to d3v3 and transitions stopped working.

the idea is to have some boxes appear on the screen, such that the new ones come sliding from the left. when elements change location, they should move to the new location.

I checked the migration documentation at (https://github.com/mbostock/d3/wiki/Upgrading-to-3.0). Code looks like this:

elements = svg.selectAll(".element").data( d3.values(@mystuff.elements), (x)->x.id )
elements.enter().insert("g",".box")
            .append("g")
            .attr("class", "element")
            .attr("id", (d)-> "elem_#{d.id}" )
            .attr("transform", @element_start_position )
            .call(@drag_action)
            .on( "click", @on_element_click )

elements.transition().duration(750)
        .each("start", () -> console.debug("start transition") )
        .attr("transform",  (d)-> @element_final_position )

element_start_position: (d)->"translate(0,#{d.y})"

element_final_position: (d)->"translate(#{d.x},#{d.y})"

what I see is that the enter() works, but the update doesn't. the console.debug() doesn't get called and the elements are left in their starting location.

help me Stack Overflow, you're my only hope...

Answer 1

.attr("transform",  (d)-> @element_final_position )

should either be this:

.attr("transform",  (d) => @element_final_position )

or more likely:

.attr("transform",  @element_final_position )