D3.js nesting and rollup at the same time in v4

2020-03-26 06:34发布

问题:

I have a very similar task as D3.js nesting and rollup at same time and solution provided by @altocumulus for d3.js v3 works perfectly fine for me (tested). However, I am using d3.js v4 across my website and I am having difficulties replicating the same approach with v4 - I am not getting the same results. Perhaps, because I don't understand the sumChildren function. Please feel free to provide a better or different approach on how to restructure the loaded csv file as json with subtotals at every node level using d3.js v4. In my case, I need to have Population at the Country, State and the City levels.

Disclaimer: I have been using SO for many years and in most of the cases I got my answers from questions posted by other people, but this is my first question. In addition to this I am noob in d3.js

population.csv:

Country,State,City,Population
"USA","California","Los Angeles",18500000
"USA","California","San Diego",1356000
"USA","California","San Francisco",837442
"USA","Texas","Austin",885400
"USA","Texas","Dallas",1258000
"USA","Texas","Houston",2196000

index.html:

<!DOCTYPE html>
<html>
<head>
  <title> Test D3.js</title>
</head>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
 --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.0/d3.min.js"></script>
<body>

<script>
d3.csv("population.csv", function(error, data) {
if (error) throw error;

var nested = d3.nest()
               .key(function(d) { return d.Country; })
               .key(function(d) { return d.State; })
               .rollup(function(cities) {
                 return cities.map(function(c) {
                  return {"City": c.City, "Population": +c.Population };
                 });
               })
               .entries(data);


// Recursively sum up children's values
function sumChildren(node) {
  node.Population = node.values.reduce(function(r, v) {
    return r + (v.values ? sumChildren(v) : v.Population);
  },0);
  return node.Population;
}

// Loop through all top level nodes in nested data,
// i.e. for all countries.
nested.forEach(function(node) {
  sumChildren(node);
});

// Output. Nothing of interest below this line.
d3.select("body").append("div")
  .style("font-family", "monospace")
  .style("white-space", "pre")
  .text(JSON.stringify(nested,null,2));

 });
</script>
</body>
</html>

Results:

[
  {
    "key": "USA",
    "values": [
      {
        "key": "California",
        "value": [
          {
            "City": "Los Angeles",
            "Population": 18500000
          },
          {
            "City": "San Diego",
            "Population": 1356000
          },
          {
            "City": "San Francisco",
            "Population": 837442
          }
        ]
      },
      {
        "key": "Texas",
        "value": [
          {
            "City": "Austin",
            "Population": 885400
          },
          {
            "City": "Dallas",
            "Population": 1258000
          },
          {
            "City": "Houston",
            "Population": 2196000
          }
        ]
      }
    ],
    "Population": null
  }
]

Desired Results:

[
  {
    "key": "USA",
    "values": [
      {
        "key": "California",
        "values": [
          {
            "City": "Los Angeles",
            "Population": 18500000
          },
          {
            "City": "San Diego",
            "Population": 1356000
          },
          {
            "City": "San Francisco",
            "Population": 837442
          }
        ],
        "Population": 20693442
      },
      {
        "key": "Texas",
        "values": [
          {
            "City": "Austin",
            "Population": 885400
          },
          {
            "City": "Dallas",
            "Population": 1258000
          },
          {
            "City": "Houston",
            "Population": 2196000
          }
        ],
        "Population": 4339400
      }
    ],
    "Population": 25032842
  }
]

回答1:

The v4 changelog tells us that

When used in conjunction with nest.rollup, nest.entries now returns {key, value} objects for the leaf entries, instead of {key, values}.

It is this little renaming from values to value within the leaf nodes which eventually breaks the code. Changing the helper function accordingly should get you back on track:

// Recursively sum up children's values
function sumChildren(node) {
  if (node.value) {
    node.values = node.value;   // Ensure, leaf nodes will also have a values array
    delete node.value;          // ...instead of a single value
  }
  node.Population = node.values.reduce(function(r, v) {
    return r + (v.value? sumChildren(v) : v.Population);
  },0);
  return node.Population;
}