D3.js 在 v4 中同时嵌套和汇总答案

【问题标题】：D3.js nesting and rollup at the same time in v4D3.js 在 v4 中同时嵌套和汇总
【发布时间】：2016-11-30 00:09:05
【问题描述】：

我有一个与D3.js nesting and rollup at same time 非常相似的任务，@altocumulus 为 d3.js v3 提供的解决方案对我来说非常好（经过测试）。但是，我在我的网站上使用 d3.js v4，我很难用 v4 复制相同的方法 - 我没有得到相同的结果。也许，因为我不了解 sumChildren 功能。请随时提供更好或不同的方法来说明如何使用 d3.js v4 在每个节点级别将加载的 csv 文件重组为带有小计的 json。就我而言，我需要在国家、州和城市级别拥有人口。

免责声明：我已经使用 SO 很多年了，在大多数情况下，我的答案都是从其他人发布的问题中得到的，但这是我的第一个问题.除此之外，我是 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>

结果：

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

期望的结果：

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

【问题讨论】：

标签： d3.js

【解决方案1】：

v4 changelog 告诉我们

当与nest.rollup 结合使用时，nest.entries 现在返回叶条目的 {key, value} 对象，而不是 {key, values}。

正是在叶节点中从 values 重命名为 value 最终破坏了代码。相应地更改辅助函数应该会让你回到正轨：

// 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;
}

【讨论】：