d3.jsグループ棒グラフが動作しない

Question

ここに私の仕事はありませんhttps://jsfiddle.net/dibyendu/wn6awvbe/です。今この棒グラフはsingle valueのためにうまく働いていて、私の要件はそれをgroup bar chartにすることです。

これを最初のステップとして行うには、すべての値のminとmaxに基づいてx軸の範囲を作成する必要があります。私はこれをうまくやり遂げることができます。

第2に、groupを作成し、groupに個別のgroup barsを追加しようとしました。この部分は私がクラックすることはできません。ここで

は私が

var combos = svg.selectAll("g").data(data) 
    .enter() 
    .append("g") 
    .attr({width: 2 * width}) 
    .attr('height',y.rangeBand()+10) 
    ; 

combos.selectAll(".bar1") 
    .append("rect") 
    .attr("class", function(d) { return "bar bar--" + (d.value < 0 ? "negative" : "positive"); }) 
    .attr("x", function(d) { return x(Math.min(0, d.value)); }) 
    .attr("y", function(d) { return y(d.name); }) 
    .attr("width", function(d) { return Math.abs(x(d.value) - x(0)); }) 
    .attr("height", y.rangeBand()); 

combos.selectAll(".bar2") 
    .append("rect") 
    .attr("class", function(d) { return "bar bar--" + (d.value < 0 ? "negative" : "positive"); }) 
    .attr("x", function(d) { return x(Math.min(0, d.value1)); }) 
    .attr("y", function(d) { return y(d.name); }) 
    .attr("width", function(d) { return Math.abs(x(d.value1) - x(0)); }) 
    .attr("height", y.rangeBand()); 

を試してみましたが、何らかの理由でその作業をしていないものを私のコードです。私がここでやっている間違いは何ですか？アドバンスのおかげで、ありがとう。

Answer 1

あなたは常にグループごとに2つのバーを持つことが保証されている場合は、クイックフィックスは、次のようになります。

fiddleを更新しました

combos 
     .append("rect") 
     .attr("class", function(d) { return "ba ba--" + (d.value < 0 ? "negative" : "positive"); }) 
     .attr("x", function(d) { return x(Math.min(0, d.value)); }) 
     .attr("y", function(d) { return y(d.name); }) 
     .attr("width", function(d) { return Math.abs(x(d.value) - x(0)); }) 
     .attr("height", y.rangeBand()/2); //<-- cut height in half 

    combos 
     .append("rect") 
     .attr("class", function(d) { return "bar bar--" + (d.value < 0 ? "negative" : "positive"); }) 
     .attr("x", function(d) { return x(Math.min(0, d.value1)); }) 
     .attr("y", function(d) { return y(d.name) + (y.rangeBand()/2); }) //<-- offset if from other bar 
     .attr("width", function(d) { return Math.abs(x(d.value1) - x(0)); }) 
     .attr("height", y.rangeBand()/2); //<-- cut height in 2 

---

。コメント

FOR

EDITSあなたが棒の動的な数を持っているしたい場合は、あなたが本当にあなたの入力データを変更する必要があります。 value1:, value2:などは実行できません。新fiddleを更新

var combos = svg.selectAll("g").data(data) 
    .enter() 
    .append("g");  
combos 
    .selectAll("rect") 
    .data(function(d){ 
    return d.value.map(function(d1){ 
    return { 
     value: d1, 
     name: d.name, 
     total: d.value.length, 
     }; 
    }) 
    }) 
    .enter() 
    .append("rect") 
    .attr("class", function(d) { return "ba bar--" + (d.value < 0 ? "negative" : "positive"); }) 
    .attr("x", function(d) { return x(Math.min(0, d.value)); }) 
    .attr("y", function(d,i) { return (y(d.name) + (y.rangeBand()/d.total * i)) ; }) 
    .attr("width", function(d) { return Math.abs(x(d.value) - x(0)); }) 
    .attr("height", function(d){ 
    return y.rangeBand()/d.total 
    }); 

---

：あなたは、サブ選択を使用し、実際にいくつかの動的なコードを取得を開始することができます。このフォーマットでは

{ 
    "name": "M1", 
    "value": [-45, -13, -10, -8] 
}, 
... 

：迅速なリファクタリングは、値の配列を使用する場合があります。