私はスクリプトがこのリンクで与えられているグループ化された棒グラフ、作っていますグループ化された棒グラフ

Question

に多くのグループを追加します。ここでは https://jsfiddle.net/yL5z1q04/4/

を私は「給与」とrank_bucketsのための「投資」のグループを持っています。ここで、データで与えられた「国家」キーに基づいて、X軸にもう1つのレベルの「グループ化」を追加したいと思います。次のように

私のデータは次のとおりです。

私はこれをどのように行うのです：

var data = [ 
    {group: "investment", height: 84636, rank_bucket: "a", nation: "United States"}, 
    {group: "salary", height: 76536, rank_bucket: "a", nation: "United States"}, 
    {group: "investment", height: 84636, rank_bucket: "a", nation: "Australia"}, 
    {group: "salary", height: 76536, rank_bucket: "a", nation: "Australia"}, 
    {group: "investment", height: 89626, rank_bucket: "b", nation: "Australia"}, 
    {group: "salary", height: 98234, rank_bucket: "b", nation: "Australia"}, 
    {group: "investment", height: 89626, rank_bucket: "b", nation: "United States"}, 
    {group: "salary", height: 98234, rank_bucket: "b", nation: "United States"} 

    ]; 

予想される出力は次のように多少なりますか？私はrank_bucketと一緒にX軸に描かれた "国家"情報を持っていたい。

ありがとうございます！

Answer 1

rank_bucket、nation、およびgroupに対して複数のscaleBandsを作成できます。

各スケールの範囲幅については、前のスケールの各帯域幅（）を使用してください。例えば、

var xscale_rank_bucket = d3.scaleBand() 
      .rangeRound([0,width]) 
      .padding(0.2) 
      .domain(Array.from(rank_buckets)); 

var xscale_nation = d3.scaleBand() 
      .rangeRound([0,xscale_rank_bucket.bandwidth()]) 
      .padding(0.1) 
      .domain(Array.from(nations)); 

あなたは既にこの一部を行っていたが、それはちょうど第三規模に達する必要がありました。

また、nationとrank_bucketに複数のx軸を作成することもできます。あなたはrank_bucketデータに基づいてそれらを追加することができますので、国民の軸について、あなたは、rank_bucketごとに1つずつ必要になります例えば、加入：

var axisNationG = axes.selectAll(".axis-nation") 
     .data(Array.from(rank_buckets)) 
     .enter() 
     .append("g") 
     .attr("transform", function(d){ 
     return "translate(" + xscale_rank_bucket(d) + ",0)" 
     }) 
     .attr("class", "x axis") 
     .call(axisNation) 

軸が翻訳され、あなたのモックアップのように見えるようにスタイル設定することができます。

https://jsfiddle.net/yL5z1q04/5/

PS - 更新フィドルは、各スケールのためのユニークな値を抽出するために、設定を使用し、スケールで使用するためにアレイに設定を変換し、データを結合します。