2

我对d3很陌生。目前我能够根据一组数据绘制圆圈 - 哇 - 我知道 :-) 但现在我想在为整个数组设置动画时一次绘制两个圆圈。假设我的数组中有 1000 个元素，我想同时绘制 1 和 2，然后绘制 2 和 3、3 和 4 等等。这应该会得到一个非常漂亮的动画:-) 我玩过 i index 和 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 .. 嗯 .. 出了什么问题？

4

2 回答 2

1

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

    .delay( function(d, i) { (2000*i); } )
于 2013-03-27T17:40:22.910 回答
0

查看代码，您有固定的持续时间 (2s) 和固定的延迟 (2s)。FOR 循环将立即运行，从而一次将所有四个动画排入队列，因此它们可能都在同时播放 - 但（可能）只有最后一个动画可见，因为您已经反弹了数据。

尝试类似：

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

将延迟乘以动画计数器应该抵消每个动画，并且通过将延迟放在第一位，它应该在开始动画之前数据得到反弹（从而在第一个动画运行之前停止最后的动画步骤重新绑定它的数据）

于 2012-09-19T10:49:35.660 回答