Мне нужно нарисовать аккорд в d3 в форме затмения, а не в виде круга

Вот мой образец js-файла, мне нужно нарисовать аккорд, но в форме затмения, а не круга. Во-вторых, мне нужно знать, что используется в матрице при создании диаграммы аккордов, и можем ли мы нарисовать аккорд с помощью простого файла json (без использования матрицы), как упоминалось http://www.delimited.io/blog/2013/12/8/chord-diagrams-in-d3 здесь. Потому что в каждом примере аккорда дана какая-то матрица для его рисования. Я новичок в d3, мне нужно многому научиться. Может ли кто-нибудь помочь действительно оценить это

var outerRadius = 500 / 2,
innerRadius = outerRadius - 100;

var fill = d3.scale.category20c();

var chord = d3.layout.chord()
.padding(.04)
.sortSubgroups(d3.descending)
.sortChords(d3.descending);

var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(innerRadius + 20);

var svg = d3.select('#content').append("svg")
.attr("width", outerRadius * 2)
.attr("height", outerRadius * 2)
.append("g")
.attr("transform", "translate(" + outerRadius + "," + outerRadius +      

")");


d3.json("readme.json", function(error, imports) {
if (error) throw error;

var indexByName = d3.map(),
  nameByIndex = d3.map(),
  matrix = [],
  n = 0;

// Returns the Flare package name for the given class name.
function name(name) {
return name.substring(0, name.lastIndexOf(".")).substring(6);
}

// Compute a unique index for each package name.
imports.forEach(function(d) {
if (!indexByName.has(d = name(d.name))) {
  nameByIndex.set(n, d);
  indexByName.set(d, n++);
}
});

 // Construct a square matrix counting package imports.
 imports.forEach(function(d) {
  var source = indexByName.get(name(d.name)),
    row = matrix[source];
  if (!row) {
  row = matrix[source] = [];
  for (var i = -1; ++i < n;) row[i] = 0;
}
  d.imports.forEach(function(d) { row[indexByName.get(name(d))]++; });
  });

 chord.matrix(matrix);

 var g = svg.selectAll("g.group")
   .data(chord.groups())
   .enter().append("svg:g")
   .attr("class", "group")

 .on("mouseover", fade(.02))
    .on("mouseout", fade(.80));
 //  .on("mouseover", mouseover);
   //.on("mouseout", fade(1));

  g.append("svg:path")
    .style("stroke", "none")
    .style("fill", function(d) { return fill(d.index); })
    .attr("d", arc);
/* g.append("path")
  .style("fill", function(d) { return fill(d.index); })
  .style("stroke", function(d) { return fill(d.index); })
  .attr("d", arc);*/

    g.append("text")
    .each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
    .attr("dy", ".35em")
    .attr("transform", function(d) {
    return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
    + "translate(" + (innerRadius + 26) + ")"
    + (d.angle > Math.PI ? "rotate(180)" : "");
    })
   .style("text-anchor", function(d) { return d.angle > Math.PI ?   "end" : null; })
  .text(function(d) { return nameByIndex.get(d.index); });

  svg.selectAll(".chord")
  .data(chord.chords)
 .enter().append("path")
  .attr("class", "chord")
  .style("stroke", function(d) { return  
  d3.rgb(fill(d.source.index)).darker(); })
  .style("fill", function(d) { return fill(d.source.index); })
//.style("opacity", 1)
  .attr("d", d3.svg.chord().radius(innerRadius));

 });


  d3.select(self.frameElement).style("height", outerRadius * 5 +   "px");