Javascript-数据插值-D3动画散点

Javascript - Data Interpolation - D3 Animated Scatter

本文关键字：动画 -D3 数据 插值 Javascript-      更新时间：2023-09-26

尝试修改下面链接中的代码，以创建一个显示数据点随时间移动的动画散点。

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]]}）；

相关文章：