繁体   English   中英

如何使用javascript获取嵌套对象中所有子项的单个属性?

[英]How to get a single property of all children in a nested object using javascript?

对于一个交互式地图,该地图显示了一段时间内的国家数据(使用d3),我有一个大对象,称为dataset dataset的属性再次是由国家/地区名称标识的对象。 下一级是对象,再次由年份表示。 最后一层是要显示的数据。 结构是这样的:

dataset
    - CountryA
        - 2010
            - population: 4000000
            - crime rate: 17.4
            - GDP per capita: 2800
        - 2011 
            - population: 4100000
            - crime rate: 16.8
            - GDP per capita: 2900
        - ...
    - CountryB
        - 2010
            - population: 3700000
            - crime rate: 25.6
            - GDP per capita: 1200
        - 2011 
            - population: 3850000
            - crime rate: 27.2
            - GDP per capita: 1180
        - ...
    - ...

现在,为了更新地图,我需要找到特定属性的范围,以适应我要使用的颜色范围。 例如,如果我想获得2010年的犯罪率的最小值和最大值,是否有一个简单的命令来检索该信息?

我确实有所有可用国家/地区的列表,当然可以遍历该列表并获取指定年份的值,将其与全局最小值/最大值进行比较,并在必要时进行更改(使用Math.min/max )。 我只是想知道,是否有一种简单的方法,例如

var crimeRateLow = getGlobalMin(dataset, 2, "crime rate");

// magic function
function getGlobalMin(object, unspecifiedLevels, indicator) { ... }

我目前正在使用以下功能,其中j是指标,而year是全局设置的变量:

function getRange(j) {
  var jRange = {"min": 0, "max": 0};
  for (k in dataset) {
    jRange["min"] = Math.min(jRange["min"], dataset[k][year][j]);
    jRange["max"] = Math.max(jRange["max"], dataset[k][year][j]);
  }
  return jRange;
}

尽管d3中没有内置功能可以解决您的问题,但d3可能有助于优雅地解决它。

  1. 通过重复应用d3.values()以获得关联数组的属性值数组(静止对象),将嵌套的对象嵌套到包含感兴趣的字段值的较小数组中。 然后,将这些属性值/对象mapped到仅包含感兴趣的字段值的数组。

  2. 使用d3.merge()将这些数组合并为一个大数组。

  3. 应用d3.extent()从中获取全局范围(即数组[min,max ])。

     function getGlobalExtent(data, field) { return d3.extent( // (3.) Get the global extent. d3.merge( // (2.) Merge all arrays into a single one. d3.values(data) // (1.) Array of all country objects in dataset .map(function(country) { // (1.) Map each country to array of field values for all years within. return d3.values(country) // (1.) Array of years in each country .map(function(year) { // (1.) Map each year to the requested field value. return year[field]; }); }) ) ); } 

我整理了一个工作片段:

 var dataset = { "CountryA": { "2010": { "population": 4000000, "crime rate": 17.4, "GDP per capita": 2800 }, "2011": { "population": 4100000, "crime rate": 16.8, "GDP per capita": 2900 } }, "CountryB": { "2010": { "population": 3700000, "crime rate": 25.6, "GDP per capita": 1200 }, "2011": { "population": 3850000, "crime rate": 27.2, "GDP per capita": 1180 } } }; function getGlobalExtent(data, field) { return d3.extent( // (3.) Get the global extent. d3.merge( // (2.) Merge all arrays into a single one. d3.values(data) // (1.) Array of all country objects in dataset .map(function(country) { // (1.) Map each country to array of field values for all years within. return d3.values(country) // (1.) Array of years in each country .map(function(year) { // (1.) Map each year to the requested field value. return year[field]; }); }) ) ); } // population: 3700000,4100000 //console.log("population:", getGlobalExtent(dataset, "population").join()); // crime rate: 16.8,27.2 //console.log("crime rate:", getGlobalExtent(dataset, "crime rate").join()); // GDP per capita: 1180,2900 //console.log("GDP per capita:", getGlobalExtent(dataset, "GDP per capita").join()); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM