什么是从D3列表的形式年龄组的最佳方式？ [英] What is the best way to form age groups from a list in D3?

问题描述

我刚开始环绕D3和arraysorting我的头。

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

我有什么人的名单。我想显示按性别分开的年龄组的人的数量。

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

或

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

我想通过D3和支持库所有可用的教程浏览。我有我可以用秤d3.nest或crossfilter.js与dimesions性别和过滤了好半天管理任务的感觉。但不知何故，我有我失去了一些东西的感觉。你有什么建议的做法？

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 十岁上下的方式来做到这一点。例如，一个双鸟巢将是：

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

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简单的解决方案可能更合适：

A straight JavaScript simpler solution might be more appropriate:

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]

这篇关于什么是从D3列表的形式年龄组的最佳方式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！