डी 3.जेएस

Question

में प्लॉट रोलिंग/मूविंग औसत अग्रिम में डेटा को कुशलतापूर्वक किए बिना डी 3 में रोलिंग/मूविंग औसत प्लॉट करने का एक तरीका ढूंढ रहे हैं। तो मैं इसके बाद दो डेटा बिंदुओं के औसत से लाइन को सुगम बनाना चाहता हूं। मेरे कोड मैं movingAverageLine निम्नलिखित डेटा बिंदुओं के औसत की गणना करने के लिए निर्दिष्ट कर सकते हैं इस

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)); 

की तरह है? मैं उस समारोह में उन तक पहुंचने का एक तरीका नहीं सोच सकता।

मैंने 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 fiddleJohn 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));