d3 v3 没有在 g 元素上开始过渡答案

【问题标题】：d3 v3 not starting transition on g elementsd3 v3 没有在 g 元素上开始过渡
【发布时间】：2013-09-09 22:35:03
【问题描述】：

问题：从 d3v2 移到 d3v3 并且转换停止工作。

这个想法是让一些框出现在屏幕上，这样新的框就会从左边滑动。当元素改变位置时，它们应该移动到新位置。

我在 (https://github.com/mbostock/d3/wiki/Upgrading-to-3.0) 上查看了迁移文档。代码如下所示：

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})"

我看到enter() 有效，但update 无效。 console.debug() 没有被调用，元素留在它们的起始位置。

帮助我 Stack Overflow，你是我唯一的希望......

【问题讨论】：

你的最后一句话，我记得我对自己说过几次。

标签： d3.js transition translate-animation

【解决方案1】：

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

应该是这样的：

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

或更可能：

.attr("transform",  @element_final_position )

【讨论】：

但是为什么不调用“start”回调呢？
所以现在元素动画到正确的位置但“开始”回调仍然没有被调用？这很奇怪。我在这里工作的场景基本相同：jsfiddle.net/B4W6g，并且“开始”确实触发了。不知道该告诉你什么...听起来可能是受到其他一些未在此处显示的因素的影响（？）。