2

添加了jsfiddle：http: //jsfiddle.net/crXK3/

这可能只是一个新手错误，但我似乎无法理解它......

这是我尝试使用但无法使其工作的代码：

            gridLines = gridLinesG.selectAll("line")
                .data(xScale.ticks(d3.time.months));

            gridLines
                .exit()
                .transition()
                .duration(transitionTime)
                .attr("x1", 0)
                .attr("x2", 0)
                .remove();

            gridLines
                .enter()
                .append("line")
                .attr("class", "gridLine")
                .attr("x1", 0)
                .attr("x2", 0)
                .attr("y1", 0);

但是，如果我这样做而不是仅仅链接退出块，它就可以正常工作：

            gridLines
                .exit()
                .attr("class", "removeLine");
            d3.selectAll(".removeLine")
                .transition()
                .duration(transitionTime)
                .attr("x1", 0)
                .attr("x2", 0)
                .remove();

或者，如果我在没有过渡的情况下这样做，它也可以正常工作：

            gridLines
                .exit()
                //.transition()
                //.duration(transitionTime)
                .attr("x1", 0)
                .attr("x2", 0)
                .remove();

有人可以解释我错过了什么吗？

4

1 回答 1

2

问题在于您处理需要移动的行的方式。在您的代码中，您在初始化转换后重新选择这些行。由于过渡，现有行不会立即删除，因此会被您重新选择。这意味着退出的线被两个过渡移动（这就是动画看起来有点奇怪的原因）然后被移除（你看不到，因为它们与其他线重叠或在 SVG 之外）。

解决方案是简单地使用现有的更新选择而不是重新选择，即更改

d3.selectAll(".gridLine")
  .transition()

到

gridLines
    .transition()
于 2013-07-02T16:02:54.190 回答