javascript - 具有平滑更新动画的 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

这是响应:

See #1410 for an in-depth explanation of the problem and the solution (selection.interrupt added in version 3.3). To summarise, existing transitions need to be interrupted before registering new ones, in particular when the new transition starts before or at the same time as the old one ends.

In other words, in the example above you need to replace:

.transition()

with:

.interrupt()
.transition()