使用 x y 坐标将 Json 或 Mongodata 解析为 viz.js 数据集？答案

【问题标题】：Parse Json or Mongodata into viz.js dataset using x y coordinate?使用 x y 坐标将 Json 或 Mongodata 解析为 viz.js 数据集？
【发布时间】：2016-06-24 13:56:23
【问题描述】：

我的Json数据是这样的：

[ {
    "age": 21,
    "eyeColor": "blue",
    "name": "Dejesus Thornton",
    "gender": "male",
    "registered": "2015-06-10"
  },
{
    "age": 21,
    "eyeColor": "blue",
    "name": "Dejesus Thornton",
    "gender": "male",
    "registered": "2015-06-11"
  },
{
    "age": 21,
    "eyeColor": "blue",
    "name": "Dejesus Thornton",
    "gender": "male",
    "registered": "2015-06-12"
  },
...
]

我将它解析为我的流星 mongo 集合，就像这样（集合中的每个项目都是一个对象）：

{
    "age": 21,
    "eyeColor": "blue",
    "name": "Dejesus Thornton",
    "gender": "male",
    "registered": "2015-06-11"
}

我试图将这种数据解析成viz.js，它接受这样的数据：

var items = [
    {x: '2014-06-13', y: 30, group: 0},
    {x: '2014-06-14', y: 10, group: 0},
    {x: '2014-06-15', y: 15, group: 1},
    {x: '2014-06-16', y: 30, group: 1},
    {x: '2014-06-17', y: 10, group: 1},
    {x: '2014-06-18', y: 15, group: 1}
];

我想计算有多少人在同一天注册或有相同的眼睛颜色（相同的东西）。

【问题讨论】：

标签： javascript json mongodb meteor

【解决方案1】：

这很简单。使用 Array.prototype.reduce() 进行计数。将原始数据数组分配给名为 rawArray 的变量。

var rawArray = [ {
    "age": 21,
    "eyeColor": "blue",
    "name": "Dejesus Thornton",
    "gender": "male",
    "registered": "2015-06-10"
  },
{
    "age": 21,
    "eyeColor": "blue",
    "name": "Dejesus Thornton",
    "gender": "male",
    "registered": "2015-06-11"
  },
{
    "age": 21,
    "eyeColor": "blue",
    "name": "Dejesus Thornton",
    "gender": "male",
    "registered": "2015-06-12"
  },
...
]

然后，按每个项目的特定属性分组。像这样：

function groupByProperty(array, property) {
  var newObject = array.reduce(function(counters, item) {
    if(!counters[item[property]]) {
      counters[item[property]] = 1;
    }
    else {
      counters[item[property]] += 1;
    }
    return counters;
  }, {});
  return Object.keys(newObject).map(function(x) {
    var obj = {
      x: x,
      y: newObject[x],
      group: 0
    };
    return obj; 
  });
}

console.log(groupByProperty(rawArray, 'registered')); // Group by 'registered'.

//  [ {
//    group: 0,
//    x: "2015-06-10",
//    y: 1
//  }, {
//    group: 0,
//    x: "2015-06-11",
//    y: 1
//  }, {
//    group: 0,
//    x: "2015-06-12",
//    y: 1
//  }]

console.log(groupByProperty(rawArray, 'eyeColor')); // Group by 'eyeColor'.

//  [{
//    group: 0,
//    x: "blue",
//    y: 3
//  }]

【讨论】：