Question

我使用d3.js模拟温度的时间序列区域图，每秒钟，温度数组将移动最旧的值并推送最新值，然后使用温度数组渲染图形。

在线演示可以通过转换更新图形，但是如果你仔细观察动画，它就可以使用。

我希望timerseries图表在x轴上从右向左移动区域形状，就像http://square.github.io/cubism/一样，但我的演示不会从右向左移动图形，只是更新每个值温度值垂直。

我知道原因是因为我的代码每次只渲染所有值。为了移动区域图，我应该使用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);

如何使用d3.js动画时间序列区域图（jsfiddle demo工作，但看起来很奇怪）

0 个答案: