从D3的列表中形成年龄组的最佳方式是什么?

I am just starting to wrap my head around D3 and arraysorting.

我只是开始在D3和array排序上做个总结。

What I have a list of "people". Which I'd like to display separated by gender the amount of people in age groups.

我有一张“人”的名单。我想用性别来区分不同年龄组的人数。

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

Result could be something like:

结果可能是这样的:

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

or

或

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

I'd browsed through all available tutorials on d3 and supporting libraries. I have the feeling I could manage the task by using scales and d3.nest or crossfilter.js with dimesions for sex and filtering for ages. But somehow I have the feeling I am missing something. What approach would you suggest?

我浏览了关于d3和支持库的所有可用教程。我觉得我可以用scale和d3来管理这个任务。或crossfilter筑巢。对性别和年龄的筛选的js。但不知何故，我觉得我错过了什么。你有什么建议?

2 个解决方案

#1

There's a number of d3ish ways to do this. For instance a double nest would be:

有很多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);

Which gets you the very d3 data structure:

这就得到了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"
          }
        ]
      },
....

A straight JavaScript simpler solution might be more appropriate:

一个简单的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);
  });

Which returns:

返回:

{
  "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"
      }
    ],
...

This is then filterable on:

这是可过滤的:

rV[aSex][anAgeGroup]

#2

The first assumption is that you have an array. {"age": 73, "sex": "F"},{"age": 65,"sex": "M"} ... Is an object with key value pairs. There is no need to have a key called "key" as this is redundant. In either case this is not a D3 question, but a question about sorting.

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