d3でグループ化されたカテゴリの棒グラフ

Question

私の要件は、純粋なd3を使用して、各カテゴリのグループ数が異なるカテゴリ別の棒グラフを描くことです。私はどのように私の要件を満たすためにドメインと範囲を取るか分かりません。

私はd3 nested grouped bar chartに答えで与えられた方法で試してみましたが、それは私の場合には動作しませんでした。

ここに私のグラフ構造が似ている：

Answer 1

あなたが言及答えのplunkerの問題はそれだけで同じ子を持つ値のために働くだろうということです。

：

var color = { 
    Mechanical: '#4A7B9D', 
    Electrical: '#54577C', 
    Hydraulic: '#ED6A5A' 
}; 

我々はまた、内側のグループになり、ネストされた値を持つ構造が必要：ダイナミック子供を処理するために、私は

は、私たちのグループのためのカラーマッピングを作成することができます。このアプローチをとった値

var barPadding = 120; 

：

// Simulated data structure 
var data = [{ 
    key: 'Mechanical', 
    values: [{ 
    key: 'Gear', 
    value: 11 
    }, { 
    key: 'Bearing', 
    value: 8 
    }, { 
    key: 'Motor', 
    value: 3 
    }] 
}]; 

は、私はバーの間の分離を決定します barPadding値を作成しました

私たちはバーのrangeBandを取得するためにダミーscaleを必要としている、それを行うことができます：

// dummy array 
var rangeBands = []; 
// cummulative value to position our bars 
var cummulative = 0; 
data.forEach(function(val, i) { 
    val.cummulative = cummulative; 
    cummulative += val.values.length; 
    val.values.forEach(function(values) { 
    rangeBands.push(i); 
    }) 
}); 
// set scale to cover whole svg 
var x_category = d3.scale.linear() 
    .range([0, width]); 

// create dummy scale to get rangeBands (width/childrenValues) 
var x_defect = d3.scale.ordinal().domain(rangeBands) 
.rangeRoundBands([0, width], .1); 
var x_category_domain = x_defect.rangeBand() * rangeBands.length; 
x_category.domain([0, x_category_domain]); 

そして、私たちのすべてのカテゴリグループgの要素を追加することができます：私たちの内面を追加

var category_g = svg.selectAll(".category") 
    .data(data) 
    .enter().append("g") 
    .attr("class", function(d) { 
    return 'category category-' + d.key; 
    }) 
    .attr("transform", function(d) { // offset by inner group size 
    var x_group = x_category((d.cummulative * x_defect.rangeBand())); 
    return "translate(" + x_group + ",0)"; 
    }) 
    .attr("fill", function(d) { // make child elements of group "inherit" this fill 
    return color[d.key]; 
    }); 

グループGの要素：当社グラム要素を有する

var defect_g = category_g.selectAll(".defect") 
    .data(function(d) { 
    return d.values; 
    }) 
    .enter().append("g") 
    .attr("class", function(d) { 
    return 'defect defect-' + d.key; 
    }) 
    .attr("transform", function(d, i) { // offset by index 
    return "translate(" + x_category((i * x_defect.rangeBand())) + ",0)"; 
    }); 

は、ラベルを追加することができます：

var category_label = category_g.selectAll(".category-label") 
    .data(function(d) { 
    return [d]; 
    }) 
    .enter().append("text") 
    .attr("class", function(d) { 
    console.log(d) 
    return 'category-label category-label-' + d.key; 
    }) 
    .attr("transform", function(d) { 
    var x_label = x_category((d.values.length * x_defect.rangeBand() + barPadding)/2); 
    var y_label = height + 30; 
    return "translate(" + x_label + "," + y_label + ")"; 
    }) 
    .text(function(d) { 
    return d.key; 
    }) 
    .attr('text-anchor', 'middle'); 

var defect_label = defect_g.selectAll(".defect-label") 
    .data(function(d) { 
    return [d]; 
    }) 
    .enter().append("text") 
    .attr("class", function(d) { 
    console.log(d) 
    return 'defect-label defect-label-' + d.key; 
    }) 
    .attr("transform", function(d) { 
    var x_label = x_category((x_defect.rangeBand() + barPadding)/2); 
    var y_label = height + 10; 
    return "translate(" + x_label + "," + y_label + ")"; 
    }) 
    .text(function(d) { 
    return d.key; 
    }) 
    .attr('text-anchor', 'middle'); 

そして最後に、私たちrects：

var rects = defect_g.selectAll('.rect') 
    .data(function(d) { 
    return [d]; 
    }) 
    .enter().append("rect") 
    .attr("class", "rect") 
    .attr("width", x_category(x_defect.rangeBand() - barPadding)) 
    .attr("x", function(d) { 
    return x_category(barPadding); 
    }) 
    .attr("y", function(d) { 
    return y(d.value); 
    }) 
    .attr("height", function(d) { 
    return height - y(d.value); 
    }); 

ここplnkrで上記のコードだ：https://plnkr.co/edit/L0eQwtEMQ413CpoS5nvo?p=preview