从 D3 的列表中形成年龄组的最佳方法是什么？答案

【问题标题】：What is the best way to form age groups from a list in D3?从 D3 的列表中形成年龄组的最佳方法是什么？
【发布时间】：2015-09-09 12:45:21
【问题描述】：

我刚刚开始研究 D3 和数组排序。

我有一个“人”列表。我想按性别显示年龄组中的人数。

{"age": 73, "sex": "F"},{"age": 65,"sex": "M"} ...

结果可能类似于：

male = {"age-group" : "0-10", "count" : "3"}, ...

或

{"key":"M","values":[{"age-group":"1-10","values":[{"age": 3,"sex":"M},....

我浏览了所有关于 d3 和支持库的可用教程。我觉得我可以通过使用 scales 和 d3.nest 或 crossfilter.js 来管理任务，并使用 dimesions 和年龄过滤。但不知何故，我觉得我错过了一些东西。你会建议什么方法？

【问题讨论】：

标签： javascript arrays json d3.js

【解决方案1】：

有很多d3ish 方法可以做到这一点。例如，双嵌套是：

var nest = d3.nest()
    .key(function(d) { return d.sex; })
    .key(function(d){
      var ageGroup = null;
      if (d.age <= 10){
        ageGroup = '0-10';
      } else if (d.age > 10 && d.age <= 20 ){
        ageGroup = '10-20';
      } else if (d.age > 20 && d.age <= 30 ){
        ageGroup = '20-30';
      } else if (d.age > 30 && d.age <= 40 ){
        ageGroup = '30-40';
      } else if (d.age > 40 && d.age <= 50 ){
        ageGroup = '40-50';
      } else if (d.age > 50 && d.age <= 60 ){
        ageGroup = '50-60';
      } else if (d.age > 60 && d.age <= 70 ){
        ageGroup = '60-70';
      } else if (d.age > 70 && d.age <= 80 ){
        ageGroup = '70-80';
      } else if (d.age > 80 && d.age <= 90 ){
        ageGroup = '80-90';
      } else if (d.age > 90 && d.age <= 100 ){
        ageGroup = '90-100';
      }
      return ageGroup;
    })
    .entries(myArray);

这为您提供了非常 d3 数据结构：

{
    "key": "F",
    "values": [
      {
        "key": "70-80",
        "values": [
          {
            "age": 79.68865430448204,
            "sex": "F"
          },
          {
            "age": 70.66421345807612,
            "sex": "F"
          }
        ]
      },
      {
        "key": "40-50",
        "values": [
          {
            "age": 41.92759427241981,
            "sex": "F"
          }
        ]
      },
....

直接的 JavaScript 更简单的解决方案可能更合适：

var rV = {};
  myArray.forEach(function(d){
    if (!rV[d.sex]){
      rV[d.sex] = {};
    }
    var ageGroup = null;
    if (d.age <= 10){
      ageGroup = '0-10';
    } else if (d.age > 10 && d.age <= 20 ){
      ageGroup = '10-20';
    } else if (d.age > 20 && d.age <= 30 ){
      ageGroup = '20-30';
    } else if (d.age > 30 && d.age <= 40 ){
      ageGroup = '30-40';
    } else if (d.age > 40 && d.age <= 50 ){
      ageGroup = '40-50';
    } else if (d.age > 50 && d.age <= 60 ){
      ageGroup = '50-60';
    } else if (d.age > 60 && d.age <= 70 ){
      ageGroup = '60-70';
    } else if (d.age > 70 && d.age <= 80 ){
      ageGroup = '70-80';
    } else if (d.age > 80 && d.age <= 90 ){
      ageGroup = '80-90';
    } else if (d.age > 90 && d.age <= 100 ){
      ageGroup = '90-100';
    }
    if (!rV[d.sex][ageGroup]){
      rV[d.sex][ageGroup] = [];
    }
    rV[d.sex][ageGroup].push(d);
  });

{
  "M": {
    "40-50": [
      {
        "age": 47.67825324088335,
        "sex": "M"
      }
    ],
    "50-60": [
      {
        "age": 50.14032511971891,
        "sex": "M"
      }
    ],
    "20-30": [
      {
        "age": 28.564708586782217,
        "sex": "M"
      },
      {
        "age": 20.309976511634886,
        "sex": "M"
      }
    ],
...

然后可过滤：

rV[aSex][anAgeGroup]

【讨论】：

非常感谢！这就是我想要的。我仍然认为会有更方便的方法。我想你可以使用 for 循环和 scale() 来减少冗余。

【解决方案2】：

第一个假设是你有一个数组。 {"age": 73, "sex": "F"},{"age": 65,"sex": "M"} ... 是具有键值对的对象。不需要有一个名为“key”的密钥，因为这是多余的。无论哪种情况，这都不是 D3 问题，而是关于排序的问题。

【讨论】：

你说得对，我正在制作这个 d3，因为 d3 似乎是为此而设计的，并提供了像 nest() 这样的功能。