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()

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

1 个答案: