D3嵌套組爲x軸

Question

如何在D3中使用嵌套組作爲我的x軸？這是否可能？

我不是我的dev的機器後我的代碼示例，但爲了便於說明，假設從下面的代碼：What is the best way to form age groups from a list in D3?

var nest = d3.nest() 
    .key(function(d) { return d.sex; }) 
    .key(function(d){ 
     var ageGroup = null; 
     if (d.age <= 10){ 
     ageGroup = '0-10'; 
     } else if (d.age > 10 && d.age <= 20){ 
     ageGroup = '10-20'; 
     } else if (d.age > 20 && d.age <= 30){ 
     ageGroup = '20-30'; 
     } else if (d.age > 30 && d.age <= 40){ 
     ageGroup = '30-40'; 
     } else if (d.age > 40 && d.age <= 50){ 
     ageGroup = '40-50'; 
     } else if (d.age > 50 && d.age <= 60){ 
     ageGroup = '50-60'; 
     } else if (d.age > 60 && d.age <= 70){ 
     ageGroup = '60-70'; 
     } else if (d.age > 70 && d.age <= 80){ 
     ageGroup = '70-80'; 
     } else if (d.age > 80 && d.age <= 90){ 
     ageGroup = '80-90'; 
     } else if (d.age > 90 && d.age <= 100){ 
     ageGroup = '90-100'; 
     } 
     return ageGroup; 
    }) 
    .entries(myArray); 

我會怎麼用ageGroup我的x軸？

Answer 1

您可以使用分組條形圖來顯示數據。正如@Cyril評論說的，您可以使用序數比例來定位座標軸值和數據。

我創建了一個簡單的jsFiddle來展示我的方法。

var x0 = d3.scale.ordinal() 
.rangeRoundBands([0, width], .1); // x scale for your ageRanges 

var x1 = d3.scale.ordinal(); // Inner x scale for your Male and Female values. 

var y = d3.scale.linear().range([height, 0]); // y sale for your count value 

var color = d3.scale.ordinal() // set colors for inner x scale 
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); 

這裏是的jsfiddle

https://jsfiddle.net/rnoo6buy/