Javascript 如何使用d3.js制作timeseries区域图的动画（JSFIDLE演示可以工作，但看起来很奇怪）

我正在使用d3.js模拟一个关于温度的timeseries区域图，对于每秒钟，温度数组将移动最旧的值并推送最新的值，然后使用温度数组渲染该图

在线演示如图所示。

在线演示的工作原理是，它使用转换更新图形，但如果您仔细观察动画，它将被使用

我希望timerseries图形在x轴上将区域形状从右向左移动，很像，但我的演示没有将图形从右向左移动，只是垂直更新温度值中的每个值

我知道原因是因为我的代码每次只呈现所有的值。为了移动面积图，我应该使用attr（“transform”，function（d）{}），但我仍然不知道如何移动

下面是我现有的代码

var colors = [  "#CDFADB","#75B8C1","#DD8BB9","#BA97C1","#ff6600"];
var randomcolors = d3.scale.category20();

var data2 = [ {v:3},{v:6},{v:7},{v:5},{v:2},{v:4},{v:8},{v:9},{v:1},{v:3},{v:8},{v:3},{v:6},{v:8},{v:1},{v:3},{v:8},{v:5},{v:2},{v:1}];

var x = d3.scale.linear().domain([0, 10]).range([0, 300]);
var y = d3.scale.linear().domain([  d3.min( data2, function(d){return d.v;  }) - 1,
                                    d3.max( data2, function(d){return d.v;  }) + 1               
                                 ])
                         .range([0, 70]);

var y_position = 100;                        

var graph = d3.select("#graph").append("svg").attr("width", "600px").attr("height", "300px");
var statuslayer = graph.append("g").attr('id','statuslayer');

var rooms = [{name:'aa'},{name:'bb'}]
rooms.forEach(function(room){
    statuslayer.append('path')
               .attr('class','room room-'+room.name);   
})

var inter = setInterval(function() {    
    var updateData2 = function(){
        data2.shift();
        data2.push( {v: Math.random(1+10)*10} ); 
        var index = 0;
        var area = d3.svg.area()
            .interpolate("basis")
            .x(function(d,i) { return x(i); })
            .y0(function(d,i) { return 70+ y_position*index; })
            .y1(function(d,i) { return y(d.v) + y_position*index ; });  

        rooms.forEach(function(room){           
            d3.select('.room-'+room.name)
               .datum(data2)               
               .style("fill",function(){ return colors[index] })
               .transition().duration(400)
               .ease("linear")
               .attr("d", area);
            index +=1;
        })
    }
    updateData2();
}, 1000); 

---

可能会有帮助。嗨，拉尔斯，我看过这篇文章。但是它没有提到如何基于路径设置面积图的动画。如果您看过我的代码，我已经制作了动画，但我的问题是动画没有从右向左移动。本文中的rect示例似乎与我的要求相似，但实际上它仍然是两种不同的东西。本教程描述了问题以及如何解决问题：虽然有些晚，但如果您在这里查看我的代码时仍有问题，它有一个实时系列正在工作，下面是一个演示：