Question

我有一个与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中的noob

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
  }
]

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

D3.js在v4

1 个答案: