如何使用非数值的百分比创建 d3 饼图？答案

【问题标题】：How to create d3 pie chart with percentage from non number values?如何使用非数值的百分比创建 d3 饼图？
【发布时间】：2015-11-22 08:10:19
【问题描述】：

[{
  "sex" : "male",
  "name" : "Ted",
  "country": "USA"
}, {
  "sex" : "male",
  "name" : "Mark",
  "country": "Hungary"
}, {
  "sex" : "female",
  "name" : "Mary",
  "country": "Australia"
}, {
  "sex" : "male",
  "name" : "Valery",
  "country": "India"
}, {
  "sex" : "female",
  "name " : "Olga",
  "country": "Ireland"
}]

我想在 d3.JS 的帮助下将此 JSON 文件转换为饼图，以显示男性和女性的百分比。例如，应该有大约 70% 的男性和 30% 的女性。我看过饼图示例，但它们是从数值创建的。一个例子是我想要的，但它是由 CSV 文件制成的： http://bl.ocks.org/phil-pedruco/a326c32fb44b10d979d2 - 我尝试为我管理此代码，但它不起作用，不幸的是： http://plnkr.co/edit/cE77QKAeDKi304666cWJ?p=preview 你能提供一些信息吗？

【问题讨论】：

为什么不把这个数据结构转换成正确的格式呢？ IE。数一数男性的数量！
是的，我想过，但我没有这方面的经验（
开始学习 Javascript。

标签： javascript d3.js charts

【解决方案1】：

如果您认为您需要查看数据嵌套的工作原理。一个好的起点是阅读D3js documentation 并查看some examples on nesting data with d3

如果您想根据 json 中的男性和女性人数创建一个饼图，您可以通过 sex 嵌套数据，然后按创建的数组的长度汇总。

var data = d3.nest()
    .key(function(d) {
        return d.sex;
    })
    .rollup(function(d) {
        return d.length;
    }).entries(json_data);

要获得百分比，您可以遍历创建的嵌套数据并除以 json_data 的总长度。

data.forEach(function(d) {
    d.percentage = d.values  / json_data.length;
});

【讨论】：