Question

添加了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();

有人能解释我错过的东西吗？

Answer 1

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

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

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

到

gridLines
    .transition()

D3 .remove（）方法在与转换链接时不起作用

1 个答案: