如何使用非數字值的百分比創建d3餅圖？

-1

[{ 
    "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 您能否提供一些信息？如何使用非數字值的百分比創建d3餅圖？

來源

2015-11-22 rinatoptimus

爲什麼不將此數據結構轉換爲正確的格式？即統計男性的數量！ –

是的，我想過，但我沒有經歷過這個（ – rinatoptimus

開始學習Javascript。 –

如果認爲你需要看看數據嵌套如何工作。一個好的起點是閱讀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; 
});

來源

2015-11-22 08:56:53

謝謝，喬納斯，它的工作原理！ – rinatoptimus

如何使用非數字值的百分比創建d3餅圖？

回答

相關問題