d3.js中的繪圖滾動/移動平均值

Question

尋找一種方法來繪製d3中的滾動/移動平均值，而無需事先操作數據。所以我想通過平均每個數據點與之後的兩個數據點來消除這條線。我的代碼是這樣的

var data = [3, 66, 2, 76, 5, 20, 1, 3, 8, 90, 2, 5, 70]; 

var w = 20, 
    h = 80; 

var x = d3.scale.linear() 
    .domain([0, 1]) 
    .range([0, w]); 
var y = d3.scale.linear() 
    .domain([0, 100]) 
    .rangeRound([h, 0]); 

var chart = d3.select("body").append("svg") 
    .attr("class", "chart") 
    .attr("width", w * data.length -1) 
    .attr("height", h); 

var line = d3.svg.line() 
    .x(function(d,i) { return x(i); }) 
    .y(function(d) { return y(d); }) 


var movingAverageLine = d3.svg.line() 
    .x(function(d,i) { return x(i); }) 
    .y(function(d) { return y(d); }) 

chart.append("svg:path").attr("d", line(data)); 
chart.append("svg:path").attr("d", movingAverageLine(data)); 

我可以指定movingAverageLine計算以下數據點的平均值？我想不出有什麼辦法可以在這個功能中訪問它們。

我在jsfiddle上設置了一個例子。 http://jsfiddle.net/tjjjohnson/XXFrg/2/#run

Answer 1

不知道你的「滾動平均」的意思，但如果你想只是有一條線，顯示您的數據的平均值，這裏是一個辦法：

chart.append("svg:line") 
    .attr("x1", x(0)) 
    .attr("x2", x(1)) 
    .attr("y1", d3.mean(data)) 
    .attr("y2", d3.mean(data)) 
    .style('stroke', 'blue') 
    .style('stroke-width', 1) 

你可以看到的jsfiddle這裏：http://jsfiddle.net/XXFrg/3/。希望有幫助，

Answer 2

下面的行函數應該做你想做的。公式基於http://en.wikipedia.org/wiki/Moving_average#Cumulative_moving_average。

var _movingSum; 
var movingAverageLine = d3.svg.line() 
.x(function(d,i) { return x(i); }) 
.y(function(d,i) { 
    if (i == 0) { 
     return _movingSum = 0; 
    } else { 
     _movingSum += d; 
    } 
    return y(_movingSum/i); 
}) 
.interpolate("basis"); 

Answer 3

先前的溶液導致累積移動平均值。

I modified the fiddle通過John O'Connor提出通過傳遞一個自定義插值功能d3.svg.line()提供一個n-moving average：

movingAvg = function(n) { 
    return function (points) { 
     points = points.map(function(each, index, array) { 
      var to = index + n - 1; 
      var subSeq, sum; 
      if (to < points.length) { 
       subSeq = array.slice(index, to + 1); 
       sum = subSeq.reduce(function(a,b) { 
        return [a[0] + b[0], a[1] + b[1]]; 
       }); 
       return sum.map(function(each) { return each/n; }); 
      } 
      return undefined; 
     }); 
     points = points.filter(function(each) { return typeof each !== 'undefined' }) 
     // Note that one could re-interpolate the points 
     // to form a basis curve (I think...) 
     return points.join("L"); 
    } 
} 
var movingAverageLine = d3.svg.line() 
    .x(function(d,i) { return x(i); }) 
    .y(function(d,i) { return y(d); }) 
    .interpolate(movingAvg(6));