D3ネストしたグループをX軸として

Question

D3でネストされたグループをX軸として使用するにはどうすればよいですか？それはすべて可能ですか？

私は私のコードの例を投稿するために私のdevのマシンではないけど、例示的な目的のために、のは、次のコードと仮定してみましょう：What is the best way to form age groups from a list in D3?私はx軸としてageGroupを使用する方法

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

を？

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/