我是 D3 的新手,正在尝试对我的数据的前一个值和下一个值进行移动平均,以使其平滑。
目前,我使用 2 个以前的值 + 当前值来工作。它确实有效,但 1) 我将如何使用下一个值,以及 2) 如果我想使用前 15 个值和后 15 个值怎么办? (如果有 30 个单独的变量来存储所有这些变量,那就太疯狂了)
我习惯了传统的 javascript,但不知道如何在 D3 中以这种方式遍历数据。 希望有大神能赐教,谢谢。
在 bl.ocks.org 上查看完整代码: http://bl.ocks.org/jcnesci/7439277
或者这里只是数据解析代码:
d3.json("by_date_mod.json", function(error, data) {
// Setup each row of data by formatting the Date for X, and by converting to a number for Y.
data = data.rows;
data.forEach(function(d) {
d.key = parseDate(String(d.key));
d.value = +d.value;
});
x.domain(d3.extent(data, function(d) { return d.key; }));
y.domain([0, d3.max(data, function(d) { return d.value; })]);
// Setup the moving average calculation.
// Currently is a hacky way of doing it by manually storing and using the previous 3 values for averaging.
// Looking for another way to address previous values so we can make the averaging window much larger (like 15 previous values).
var prevPrevVal = 0;
var prevVal = 0;
var curVal = 0
var movingAverageLine = d3.svg.line()
.x(function(d,i) { return x(d.key); })
.y(function(d,i) {
if (i == 0) {
prevPrevVal = y(d.value);
prevVal = y(d.value);
curVal = y(d.value);
} else if (i == 1) {
prevPrevVal = prevVal;
prevVal = curVal;
curVal = (prevVal + y(d.value)) / 2.0;
} else {
prevPrevVal = prevVal;
prevVal = curVal;
curVal = (prevPrevVal + prevVal + y(d.value)) / 3.0;
}
return curVal;
})
.interpolate("basis");
// Draw the moving average version of the data, as a line.
graph1.append("path")
.attr("class", "average")
.attr("d", movingAverageLine(data));
// Draw the raw data as an area.
graph1.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area);
// Draw the X-axis of the graph.
graph1.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Draw the Y-axis of the graph.
graph1.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Value");
});
最佳答案
您需要一个函数来计算移动平均值:
var movingWindowAvg = function (arr, step) { // Window size = 2 * step + 1
return arr.map(function (_, idx) {
var wnd = arr.slice(idx - step, idx + step + 1);
var result = d3.sum(wnd) / wnd.length;
// Check for isNaN, the javascript way
result = (result == result) ? result : _;
return result;
});
};
var avgData = movingWindowAvg(avg, 7); // 15 step moving window.
请注意,当无法提取完整窗口时,此函数会篡改原始数组边界处的值。
更新:如果结果为NaN
,将结果转换为开头的当前数。检查result == result
is the recommended way of testing for NaN
s in Javascript .
关于javascript - d3.js 具有上一个和下一个数据值的移动平均线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19940475/