Multiple Groups/Arcs on Chord Diagram

[Rachel Rinaldi]

Hello all,

I am trying to implement an additional outer-layer arc on my d3js Chord Diagram. I believe I am close and I understand the logic of the code (drawing the arc based upon the start and end angle of the inner arcs) but I believe I somehow have my inner/outer radius attributes incorrect or need to implement some kind of translation to the path to align to the overall svg. Here is my code  and the brown arc is what I am trying to create as the outer layer. I am trying to mimic the example I found here where he creates the "SuperCategory" Arcs. Any direction is greatly appreciated!

//define grouping with colors - limit to 1 arc for now (outer arc above Test1 thru Test3)
    var groups = [
    {sIndex: 0, eIndex: 2, title: 'SuperCategory 1', color: '#c69c6d'}];

// the chord Diagram matrix, their indexes, and start/end angles
  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);

  // call arc() utilizing the start and end angle of the indexes given in groups[]
    var arc1 = d3.arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius)
      .startAngle(cD[__g.sIndex].startAngle) 
      .endAngle(cD[__g.eIndex].endAngle) 

 // draw the path (currently, does not align)
    svg.append("path").attr("d", arc1).attr('fill', __g.color).attr('id', 'SuperCategory' + i);

[Rachel Rinaldi]

Sorry to answer my own question. Needed to add the translation that exists on the original groups/paths to the new paths.

 // 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 + ")");

Updated jsfiddle.