Question

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

http://bost.ocks.org/mike/nations/

挣扎着绕着数据插值部分

 openssl s_client -connect kickmarket.eu:443
CONNECTED(00000003)
depth=0 OU = Domain Control Validated, OU = PositiveSSL, CN = www.kickmarket.eu
verify error:num=20:unable to get local issuer certificate
verify return:1
depth=0 OU = Domain Control Validated, OU = PositiveSSL, CN = www.kickmarket.eu
verify error:num=27:certificate not trusted
verify return:1
depth=0 OU = Domain Control Validated, OU = PositiveSSL, CN = www.kickmarket.eu
verify error:num=21:unable to verify the first certificate
verify return:1
---
Certificate chain
 0 s:/OU=Domain Control Validated/OU=PositiveSSL/CN=www.kickmarket.eu
   i:/C=GB/ST=Greater Manchester/L=Salford/O=COMODO CA Limited/CN=COMODO RSA Domain Validation Secure Server CA
---
Server certificate
-----BEGIN CERTIFICATE-----
...........................................
-----END CERTIFICATE-----
subject=/OU=Domain Control Validated/OU=PositiveSSL/CN=www.kickmarket.eu
issuer=/C=GB/ST=Greater Manchester/L=Salford/O=COMODO CA Limited/CN=COMODO RSA Domain Validation Secure Server CA
---
No client certificate CA names sent
Server Temp Key: ECDH, prime256v1, 256 bits
---
SSL handshake has read 2038 bytes and written 375 bytes
---
New, TLSv1/SSLv3, Cipher is ECDHE-RSA-AES256-GCM-SHA384
Server public key is 2048 bit
Secure Renegotiation IS supported
Compression: NONE
Expansion: NONE
SSL-Session:
    Protocol  : TLSv1.2
    Cipher    : ECDHE-RSA-AES256-GCM-SHA384
    Session-ID: 4D23F4A942AAD4264BE96EB5F1E62204269D882A64ACFBD2D139CD2F10A449A0
    Session-ID-ctx: 
    Master-Key: 1E381DAA3BA90FE3609606716E7E9A2EB2E2F671E9F3C4005D8EBAE009103A7AB771FB2AC8B45F169F43CBD0AD352E06
    Key-Arg   : None
    Krb5 Principal: None
    PSK identity: None
    PSK identity hint: None
    TLS session ticket lifetime hint: 300 (seconds)
    TLS session ticket:
   ..................................

    Start Time: 1446132175
    Timeout   : 300 (sec)
    Verify return code: 21 (unable to verify the first certificate)
---

Code期望这种格式的数据，x和y值包含一个具有相应年份和值的数组。

// 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];
      }
    });

我传入的数据采用这种格式，每年都有一个记录。

d: Object
category: "1"
employee: "12017512"
x: Array[63]
y: Array[63]

如何修改代码以接受我拥有的格式的数据？

Answer 1

管理解决我的问题。答案是否有助于任何人使用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]]}）;

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

1 个答案: