具有平滑更新动画的 D3 折线图

Question

我正在尝试改编动画折线图示例： http://bl.ocks.org/benjchristensen/1148374

<div id="graph1" class="aGraph" style="width:600px; height:60px;"></div>
<script>
    function draw(id, width, height, updateDelay, transitionDelay) {
        var graph = d3.select(id).append("svg:svg").attr("width", "100%").attr("height", "100%");
        var data = [3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 9];
    var x = d3.scale.linear().domain([0, 48]).range([-5, width]);
    var y = d3.scale.linear().domain([0, 10]).range([0, height]);
    var line = d3.svg.line()
            .x(function(d, i) { return x(i); })
            .y(function(d) { return y(d); })
            .interpolate("basis");
    graph.selectAll("path")
            .data([data])
            .enter()
            .append("svg:path")
            .attr("d", line);
    function redraw() {
        graph.selectAll("path")
                .data([data])
                .attr("transform", "translate(" + x(1) + ")")
                .attr("d", line)
                .transition()
                .ease("linear")
                .duration(transitionDelay)
                .attr("transform", "translate(" + x(0) + ")");
    }
    setInterval(function () {
                data.push(data.shift());
                redraw();
        }, updateDelay);
    }
    draw("#graph1", 300, 30, 1000, 1000);
</script>

这将使用 d3 v2 （http://d3js.org/d3.v2.js）.
正确设置动画在 d3 v3.3.9 （http://d3js.org/d3.v3.js） 下没有平稳过渡，我可以找出原因。

v2 和 v3 之间是否存在任何根本差异，导致上述脚本无效？

Answer 1

在 GitHub 上发布此内容： https://github.com/mbostock/d3/issues/1624

以下是响应：

有关问题和解决方案的深入解释，请参阅 #1410 （在版本 3.3 中添加了 selection.interrupt）。总而言之，现有的 在注册新转换之前需要中断转换，在 特别是当新的过渡在之前或同时开始时 随着旧的结束。

换句话说，在上面的示例中，您需要替换：

.transition()
with:
.interrupt()
.transition()