3

我正在尝试改编一个动画线图示例：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 之间是否存在使上述脚本无效的根本差异？

4

1 回答 1

3

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

这是回应：

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

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

.transition()

with:

.interrupt()
.transition()
于 2013-11-11T13:30:08.327 回答