Aninhamento e rollup do D3.js ao mesmo tempo na v4

Question

Nov 30, 2016, 01:09 AM

Aninhamento e rollup do D3.js ao mesmo tempo na v4

Eu tenho uma tarefa muito semelhante àAninhamento e rollup do D3.js ao mesmo tempo e solução fornecida por@altocumulus para d3.js v3 funciona perfeitamente bem para mim (testado). No entanto, estou usando o d3.js. v4 no meu site e estou tendo dificuldades em replicar a mesma abordagem com a v4 - não estou obtendo os mesmos resultados. Talvez, porque eu não entendo osumChildren função. Sinta-se à vontade para fornecer uma abordagem melhor ou diferente de como reestruturar o arquivo csv carregado como json com subtotais em todos os níveis de nós usando o d3.js. v4. No meu caso, eu preciso terPopulação nos níveis País, Estado e Cidade.

Aviso Legal: Uso SO há muitos anos e, na maioria dos casos, recebi minhas respostas de perguntas postadas por outras pessoas, mas esta é minha primeira pergunta. Além disso, eu sou novato em d3.js

População.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>

Resultados:

[
  {
    "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
  }
]

Resultados desejados:

[
  {
    "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
  }
]