グループとd3jsの積み重ね棒グラフ

Question

私はd3を勉強するのが初めてです。したがって、私のグラフの非効率性を改善するためのアドバイスは非常に高く評価されます。私はd3jsを使って、2つのカラースケールを持つ水平積み棒グラフを生成しています。

この例では、2つのチームと合計8人のプレイヤーがあります。私たちは、最初にトータルポイントと1ポイントをベースにしてプレーヤーをチャート化しています。次に、2つの異なる色の目盛りを使用して、どのチームに属しているかを示します。

Iは参照として本スタックバーの例を用いてこれをした：http://bl.ocks.org/mbostock/3886208

...しかし、チームに関連付けられたカラースケールを用いて、各プレイヤー（y軸）を着色するために、私が最初に除去しなければなりませんでした各ゲーム用に作成されたラッピンググループのそれぞれに適用されていました。次に、各シリーズのキーをそのシリーズの各データ配列に追加する必要がありました。

個人を描画するときに、ifとhard codeを実行する必要がありました。どの場合にどのカラースケールを使用するかを指示するif条件があります。ここで

は私のブロックです：https://bl.ocks.org/Ognami/2128772d2d7c1d2708d973b9401e8e1f

私の質問は、最も重要なのは、各系列のデータ配列のすべてに沿って、このキーを渡すことが簡単な方法ですか？そして、どの尺度を選ぶかの条件付きの方法がありますか？

Answer 1

ここにいくつかの小さな最適化があります。オブジェクトのカラースケールを格納します。

var z = { 
    'a': d3.scaleOrdinal() 
    .range(["#8cb6d9", "#4787ba", "#216297"]), 
    'b': d3.scaleOrdinal() 
    .range(["#ff5555", "#ff1122", "#990022"]) 
}; 

割り当てとしてそこドメイン：

for (key in z){ 
z[key].domain(key); 
} 

ちょうどダイレクト選択までのデータを渡し、親から「キー」を取得：

g.append("g") 
    .selectAll("g") 
    .data(d3.stack().keys(keys)(data)) 
    .enter().append("g") 
    .selectAll("rect") 
    .data(d => d) 
    .enter().append("rect") 
    .attr("fill", function(d, i) { 
    var key = d3.select(this.parentNode).datum().key; 
    return z[d.data.team](key); 
    }); 

チームの数が増減すると、zを編集してチームの色を追加するだけで済みます。

フルコードhere。