D3js 코드 다이어그램 여러 그룹

Question

here과 같은 "수퍼 그룹"기능을 복제하려고합니다. 내 시작 및 끝 각도가 제 주 행렬에 따라 정확하더라도 아크는 올바르게 정렬되지 않습니다. Arc2에서 InnerRadius와 OuterRadius라는 느낌이 들지만 바꿀 필요가있는 것을 좁힐 수는 없습니다. 내 예제 코드는 here입니다. 당신은 번역이 그들에게 적용했던 갈색 아크 2.

//define grouping with colors 
    var groups = [ 
    {sIndex: 0, eIndex: 2, title: 'SuperCategory 1', color: '#c69c6d'} 

    ]; 
    var cD = chord(matrix).groups; 

    console.log(cD); 


    //draw arcs 
    for(var i=0;i<groups.length;i++) { 
    var __g = groups[i]; 
    console.log(cD[__g.sIndex].startAngle); 
    var arc1 = d3.arc() 
     .innerRadius(innerRadius) 
     .outerRadius(outerRadius) 
     .startAngle(cD[__g.sIndex].startAngle) 
     .endAngle(cD[__g.eIndex].endAngle) 

    svg.append("path").attr("d", arc1).attr('fill', __g.color).attr('id', 'SuperCategory' + i); 

Answer 1

내 원래의 그룹 (Test1을, Test2를, 등)에 대한 내 길처럼 보이는 인덱스의 인덱스 0 또는 endAngle의 시작 각도로 정렬되지 않습니다 볼 수 있습니다 . SuperCategory ptah에 동일한 번역을 적용한 다음이를 바깥 쪽 호로 이동하기 위해 안쪽/바깥 쪽 반지름에 추가해야했습니다. jsfiddle to reflect the change을 업데이트했습니다.

// Add to Radii to move arc flush against inner arc 
     .innerRadius(innerRadius + 20) 
     .outerRadius(outerRadius + 20) 
     .startAngle(cD[__g.sIndex].startAngle) 
     .endAngle(cD[__g.eIndex].endAngle) 

// add the translation 
    svg.append("path").attr("d", arc1).attr('fill', __g.color).attr('id', 'SuperCategory' + i).attr("transform", "translate(" + width/2 + "," + height/2 + ")");