D3 v4 如何同步迭代数据

Question

I have an array called states that is an array of arrays. Each array element has 2 items, a United States state name and its abbreviation:

states = [
  ['Arizona', 'AZ'],
  ['Alabama', 'AL'],
  ['Alaska', 'AK'],
  ['Arkansas', 'AR'],
  ['California', 'CA'],
  ...
  ]

I have a map called statesData with key = state abbreviation. I'm trying to use the states array to create a new map with the same values as statesData , but with the key equal to the state's full name:

function setStatesFullData(statesFullData, statesData) {
  statesData.each(function(key, value) {
    states.forEach(function(element) {
      if (key == element[1]) {
        statesFullData.set(element[0], value);
      }
    })
  })
  console.log(statesFullData.size());
  return statesFullData;
}


var statesFullData = d3.map();
statesFullData = setStatesFullData(statesFullData, statesData);

Output:

0

This is expected due to variable scoping and (I believe) that map.each and array.forEach are asynchronous functions.

I currently don't understand how I can around this: the data has to exist outside the statesData.forEach function to be used, and by then the data will not exist.

I think there's something about asynchronous development that I'm missing.

I can provide more info on request. Thank you!

Answer 1

Full Demo (also below): https://codepen.io/Alexander9111/pen/YzXNGyZ )

A step-by-step explanation is at the bottom of this answer

 const states = [ ['Arizona', 'AZ'], ['Alabama', 'AL'], ['Alaska', 'AK'], ['Arkansas', 'AR'], ['California', 'CA'] ]; const statesReversed = states.map((child, index) =>{ return [...child.reverse()] }); console.log(statesReversed); const statesConversionObject = Object.fromEntries(statesReversed); console.log(statesConversionObject); const statesData = { 'AZ': ['Some', 'Data'], 'AL': ['Some', 'Data'], 'AK': ['Some', 'Data'], 'AR': ['Some', 'Data'], 'CA': ['Some', 'Data'] }; const statesDataModified = {}; for (let key in statesData){ const newKey = statesConversionObject[key]; statesDataModified[newKey] = statesData[key]; } console.log(statesDataModified); const statesFullData = d3.map(statesDataModified); console.log(statesFullData);

Step by Step:

Original Data:

const states = [
  ['Arizona', 'AZ'],
  ['Alabama', 'AL'],
  ['Alaska', 'AK'],
  ['Arkansas', 'AR'],
  ['California', 'CA']
];

const statesData = {
  'AZ': ['Some', 'Data'],
  'AL': ['Some', 'Data'],
  'AK': ['Some', 'Data'],
  'AR': ['Some', 'Data'],
  'CA': ['Some', 'Data']
};

1. Reverse our array of arrays (might be called array of touples in other languages). We do the reversing by using array.map() to iterate over the outer array and [...child.reverse()] to reverse the inner array:

    const statesReversed = [ ['AZ', 'Arizona',], ['AL', 'Alabama'], ['AK', 'Alaska'], ['AR', 'Arkansas'], ['CA', 'California'] ];

2. Then we can take this and use it to create a javascript object (/hash table) using Object.fromEntries(statesReversed) so that we can use this to essentially "lookup" abbreviations and return full names. We do this using:

    const statesConversionObject = Object.fromEntries(statesReversed); //which gives us: statesConversionObject = { AK: "Alaska", AL: "Alabama", AR: "Arkansas", AZ: "Arizona", CA: "California" }

3. This allows us to do this lookup like so:

    const statesDataModified = {}; for (let key in statesData){ const newKey = statesConversionObject[key]; statesDataModified[newKey] = statesData[key]; }

4. We get in return:

    statesDataModified = { 'Arizona': ['Some', 'Data'], 'Alabama': ['Some', 'Data'], 'Alaska': ['Some', 'Data'], 'Arkansas': ['Some', 'Data'], 'California': ['Some', 'Data'] };

5. Finally, convert to d3.map() :

    const statesFullData = d3.map(statesDataModified);

Answer 2

You can easily create a new Map object used for mapping states' abbreviations to their full names by passing a new copy of your states array to the Map constructor having keys and values reversed:

const statesMap = new Map(states.map(([name, abbr]) => [abbr, name]));

This acts as helper to resolve states' names when subsequently creating the new statesFullData map from the statesData map:

const statesFullData = new Map(                    // Create new map (full names-to-data) from...
  Array.from(                                      // ...array...
    statesData,                                    // ...from previous map (abbr-to-data)...
    ([abbr, data]) => [statesMap.get(abbr), data]  // ...keys resolved to full name by abbreviation.
  )
);

Have a look at the following snippet for a working demo:

 const states = [ ['Arizona', 'AZ'], ['Alabama', 'AL'], ['Alaska', 'AK'], ['Arkansas', 'AR'], ['California', 'CA'], ]; const statesData = new Map([ ['AZ', "AZ data"], ['AL', "AL data"], ['AK', "AK data"], ['AR', "AR data"], ['CA', "CA data"], ]); const statesMap = new Map(states.map(([name, abbr]) => [abbr, name])); const statesFullData = new Map( Array.from( statesData, ([abbr, data]) => [statesMap.get(abbr), data] ) ); console.log(...statesFullData);