javascript - d3 - 如何在数组上设置动画

Question

我是 d3 的新手。目前我可以根据一组数据绘制圆圈 - 哇 - 我知道 :-) 但现在我只想在为整个数组设置动画时一次绘制两个圆圈。假设我的数组中有 1000 个元素，我想同时绘制 1 和 2，然后绘制 2 和 3、3 和 4，依此类推。这应该得到一个非常漂亮的动画 :-) 我玩过我索引的函数和 exit().remove() 但这不起作用。

这是我的:

var w = 500;
        var h = 300;
        var padding = 20;

        var dataset = [
                        [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
                        [410, 12], [475, 44], [25, 67], [85, 21], [220, 88],
                        [600, 150]
                      ];

        //Create SVG element
        var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

        //Create scale functions
        var xScale = d3.scale.linear()
            .domain([0, d3.max(dataset, function(d) { return d[0]; })])
            .range([padding, w - padding * 2]);

        var yScale = d3.scale.linear()
            .domain([0, d3.max(dataset, function(d) { return d[1]; })])
            .range([h - padding, padding]);

        //Create circles
        svg.selectAll("circle")
               .data(dataset.slice(0,2))
               .enter()
               .append("circle")
               .attr("cx", function(d) {
                    return xScale(d[0]);
               })
               .attr("cy", function(d) {
                    return yScale(d[1]);
               })
               .attr("r",10);

        for (var i=0; i<4;i++) {

            svg.selectAll("circle").data(dataset.slice(i,i+2)).transition().duration(2000).delay(2000)
            .attr("cx", function(d) {
                    return xScale(d[0]);
               })
               .attr("cy", function(d) {
                    return yScale(d[1]);
               })
               .attr("r", 10);
            //svg.selectAll("circle").data(dataset.slice(i,i+1)).exit().remove();
            console.log(dataset.slice(i,i+2));
        }

但我只会得到一个动画，而不是 4 个 .. 嗯 .. 出了什么问题？

Answer 1

延迟函数接受回调，因此无需将您的选择包装在 for 循环中。

    .delay( function(d, i) { (2000*i); } )