그룹이 포함 된 d3js 스택 막 대형 차트

Question

저는 d3을 배우는 것에 익숙하지 않으므로 저의 차트에서 비효율적 인 점을 개선하기위한 조언은 크게 감사하겠습니다. d3js를 사용하여 두 개의 색 눈금이있는 가로 누적 막 대형 차트를 만듭니다.

이 예에서는 두 개의 팀과 총 8 명의 플레이어가 있습니다. 우리는 총점과 게임 당 포인트를 기준으로 플레이어를 먼저 차트로 표시합니다. 그런 다음 두 개의 서로 다른 색 눈금을 사용하여 팀이 속한 팀을 보여줍니다.

난이 참조로서이 스택 바 예를 사용했다 : http://bl.ocks.org/mbostock/3886208

하지만 팀과 연관된 색상 눈금을 사용하여 각 플레이어 (Y 축)을 착색하기 위해, I 먼저 제거했다 채우기는 각 게임에 대해 만들어진 래핑 그룹 각각에 적용되고있었습니다. 그런 다음 해당 시리즈의 각 데이터 배열에 각 스택() 시리즈의 키를 추가해야했습니다.

개개인을 그릴 때 나는 어떤 경우에 어떤 색 눈금을 사용할지를 알려주는 if 조건을 if와 hard 코드로 작성해야했습니다. 가장 중요한 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.