D3 v4 中的 Nest() 函数生成带有 $ 符号的密钥

lea*_*ner 1 html javascript d3.js

我第一次使用 d3.nest() 函数试图在 d3 中绘制一个等值线。现在,当我嵌套年份和国家/地区时,我看到国家(如 $AUS)和年份(如 1960 美元)都附加了“$”符号。那么,是否需要将数组作为 dataByCountryAndyear['$AUS'] 访问?

我读了这篇文章:

在这个 d3.js 日历视图中包含 json?

似乎在 d3 v4 中会出现这种行为,但是我想了解在这种情况下使用键访问对象的正确方法是什么。


function ready(error, country_data, lfpr_data) {

  // converting strings to numbers where necessary
  lfpr_data.forEach(d => {
        d.year = +d.year
        d.female_lfpr = +d.female_lfpr;
        d.male_lfpr = +d.male_lfpr;
  });

  // nesting by country and year i.e for each country all years beneath it
  var dataByCountryByYear = d3.nest()
      .key(function(d) { return d.country; })
      .key(function(d) { return d.year; })
      .map(lfpr_data); 

  console.log(dataByCountryByYear['$AUS'])

  country_data.features.forEach(each_country => { 
    each_country.properties.years = dataByCountryByYear[each_country.id]
  });
}

Run Code Online (Sandbox Code Playgroud)

我的数据如下所示:

year    country country_name    region  female_lfpr male_lfpr   total_lfpr
1960    ABW Aruba   Latin America & Caribbean   NA  NA  NA
1960    AFG Afghanistan South Asia  NA  NA  NA
1960    AGO Angola  Sub-Saharan Africa  NA  NA  NA
1960    ALB Albania Europe & Central Asia   NA  NA  NA
1960    AND Andorra Europe & Central Asia   NA  NA  NA
1960    ARE United Arab Emirates    Middle East & North Africa  NA  NA  NA
1960    ARG Argentina   Latin America & Caribbean   NA  NA  NA
1960    ARM Armenia Europe & Central Asia   NA  NA  NA
1960    ASM American Samoa  East Asia & Pacific NA  NA  NA
1960    ATG Antigua and Barbuda Latin America & Caribbean   NA  NA  NA
Run Code Online (Sandbox Code Playgroud)

Ger*_*ado 5

你没有使用entries,这...

将嵌套运算符应用于指定的数组,返回键值条目数组。(强调我的)

相反,您使用的map是:

将嵌套运算符应用于指定的数组,返回嵌套的map。(强调我的)

所以,你得到的结果nest不是一个数组,而是一个map。这是一种不同的对象。

话虽如此,你的两个问题:

  1. d3.map将自动设置以$符号开头的键,如您在 D3源代码中所见:

    export var prefix = "$";
    
    Run Code Online (Sandbox Code Playgroud)

    但是你不需要介意那个前缀(更多关于下面的内容)。

  2. 由于那是地图,而不是数组,因此您必须使用地图的方法,例如has,getset。使用这些方法时,您不需要使用美元符号。

这是您的代码/数据的示例:

export var prefix = "$";
Run Code Online (Sandbox Code Playgroud)
const csv = `year,country,country_name,region,female_lfpr male_lfpr,total_lfpr
1960,ABW,Aruba,Latin America & Caribbean,NA,NA,NA
1960,AFG,Afghanistan,South Asia,NA,NA,NA`;

const data = d3.csvParse(csv);

const dataByCountryByYear = d3.nest()
  .key(function(d) {
    return d.country;
  })
  .key(function(d) {
    return d.year;
  })
  .map(data);

console.log(dataByCountryByYear.has("AFG"))
Run Code Online (Sandbox Code Playgroud)