Question

[{
  "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 你能提供一些信息吗？

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

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

1 个答案: