尝试修改下面链接中的代码,以创建一个显示数据点随时间移动的动画散点。
http://bost.ocks.org/mike/nations/
挣扎着把我的头缠在数据插值部分上
// Interpolates the dataset for the given (fractional) year.
function interpolateData(year) {
return nations.map(function(d) {
return {
employee: d.employee,
category: d.category,
x:interpolateValues(d.x, year),
y:interpolateValues(d.y, year)
};
});
}
// Finds (and possibly interpolates) the value for the specified year.
function interpolateValues(values, year) {
var i = bisect.left(values, year, 0, values.length - 1),
a = values[i];
if (i > 0) {
var b = values[i - 1],
t = (year - a[0]) / (b[0] - a[0]);
return a[1] * (1 - t) + b[1] * t;
}
return a[1];
}
});
代码需要此格式的数据,其中x和y值包含一个具有相应年份和值的数组。
d: Object
category: "1"
employee: "12017512"
x: Array[63]
y: Array[63]
我传递的数据是这种格式的,每年都有一个记录。
d: Object
category: "1"
employee: "12017512"
x: 2697.3199999999993
y: 24
year: "2015"
如何修改代码以接受现有格式的数据?
设法解决了我的问题。如果它对任何人都有帮助的话,答案是使用underscore.js和下面的代码。
我还发现以下jsfiddle很有用。
http://jsfiddle.net/bgAzH/1/
groupData = _.map(_.groupBy(data, 'dimension1', 'dimension2'), function (b) {
return _.extend(_.pick(b[0], 'dimension1', 'dimension2'), {
x: _.map(b, function (elem) {
return _.pick(elem, 'time', 'x')
}),
y: _.map(b, function (elem) {
return _.pick(elem, 'time', 'y')
})
});
});
然后,当将对象数组传递到插值函数时,我将对象转换为简单数组。
var values = values.map(function (obj) { return [Number(obj.time), obj[element]]
});