d3js堆積的條形圖與組

Question

我是新來學習D3，所以任何意見，以改善任何低效率在我的圖表將不勝感激。我正在使用d3js生成具有兩種色階的水平堆疊條形圖。

在這個例子中，有兩個球隊和總共8名球員。我們首先根據總分數，然後按場均得分來製作球員。然後，我還使用兩種不同的色階來顯示他們屬於哪個團隊。

我這個使用這個棧欄示例作爲參考那樣：http://bl.ocks.org/mbostock/3886208

...但爲了利用色彩與球隊相關的色標每個玩家（Y軸），我只好先刪除填寫適用於爲每場比賽制作的每個包裝組。然後，我必須將每個堆棧（）系列的密鑰添加到該系列中的每個數據陣列。

繪製個體時，我必須做if和hard代碼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即可包含該球隊的顏色。

Full code here。