D3.js将数据集映射到具有不同键的新数据集

d3.js mapping a dataset into a new one with different keys

本文关键字：数据集 js 映射 D3      更新时间：2023-09-26

我有以下数据集：

dataset = [
  {
  'date': '2015-11-11T19:15:00.000Z'
  'cpu': 13
  'ram': 128
  'sessions': 1367
  }
  {
  'date': '2015-11-11T19:16:00.000Z'
  'cpu': 70
  'ram': 128
  'sessions': 3567
  }
  {
  'date': '2015-11-11T19:17:00.000Z'
  'cpu': 25
  'ram': 250
  'sessions': 567
  }
  {
  'date': '2015-11-11T19:18:00.000Z'
  'cpu': 20
  'ram': 120
  'sessions': 4567
  }
]

..我想创建一个新的数据集，如下所示：

newdataset = [
 { 'cpu': [
     {'date': '2015-11-11T19:15:00.000Z', 'value':13},
     {'date': '2015-11-11T19:16:00.000Z', 'value':70}
   ]
 }
 { 'ram': [
     {'date': '2015-11-11T19:15:00.000Z', 'value':128},
     {'date': '2015-11-11T19:16:00.000Z', 'value':128}
   ]
 }
 { 'sessions': [
     {'date': '2015-11-11T19:15:00.000Z', 'value':1367},
     {'date': '2015-11-11T19:16:00.000Z', 'value':3567}
   ]
 }
]

虽然我对d3.js有很好的了解，但我以前从未有过数据库的经验。到目前为止，我设法做到了这一点：

multiplegroups = d3.keys(dataset[0])
    .filter((key) ->
    key != 'date'
  )
multiplegroups2 = dataset.map (o) ->
  o.cpu

通过上面的两个函数，我可以得到

Array [ "cpu", "ram", "sessions" ]

和

Array [ 13, 70, 25, 20 ]

剩下要做的就是以某种方式为每个键运行第二个函数 x3 次，并将这些值数组附加到第一个函数生成的数组中的键。

我尝试这样做的原因是为了一个小的倍数图表。我的意思是我可以使用第二个函数手动生成 3 个不同的数组并单独使用它们，但确信有一种更好/更快的方法来做到这一点。

在 D3 中，您可以这样做：

var dataset = [{
    'date': '2015-11-11T19:15:00.000Z',
    'cpu': 13,
    'ram': 128,
    'sessions': 1367
  }, {
    'date': '2015-11-11T19:16:00.000Z',
    'cpu': 70,
    'ram': 128,
    'sessions': 3567
  }, {
    'date': '2015-11-11T19:17:00.000Z',
    'cpu': 25,
    'ram': 250,
    'sessions': 567
  }, {
    'date': '2015-11-11T19:18:00.000Z',
    'cpu': 20,
    'ram': 120,
    'sessions': 4567
  }],
  multiplegroups = d3.keys(dataset[0])
  .filter(function(key) {
    return key != "date"; //get all not date key
  }).map(function(d) {
    var ob = {};//iterate on non date keys
    ob[d] = dataset.map(function(d1) {
		  //iterate on full data to pluck our desired value
      return {
        date: d1.date,
        value: d1[d]
      };
    });
    return ob;
  });
document.write('<pre>' + JSON.stringify(multiplegroups, 0, 4) + '</pre>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

在普通的Javascript中，你可以写这个。

var dataset = [{ 'date': '2015-11-11T19:15:00.000Z', 'cpu': 13, 'ram': 128, 'sessions': 1367 }, { 'date': '2015-11-11T19:16:00.000Z', 'cpu': 70, 'ram': 128, 'sessions': 3567 }, { 'date': '2015-11-11T19:17:00.000Z', 'cpu': 25, 'ram': 250, 'sessions': 567 }, { 'date': '2015-11-11T19:18:00.000Z', 'cpu': 20, 'ram': 120, 'sessions': 4567 }],
    newdataset = function (array) {
        var r = [], o = {};
        array.forEach(function (a) {
            Object.keys(a).filter(function (a) {
                return a !== 'date';
            }).forEach(function (k) {
                if (!o[k]) {
                    o[k] = {};
                    o[k][k] = [];
                    r.push(o[k]);
                }
                o[k][k].push({ date: a.date, value: a[k] });
            });
        });
        return r;
    }(dataset);
document.write('<pre>' + JSON.stringify(newdataset, 0, 4) + '</pre>');

相关文章：