Попытка сделать что-то похожее на то, что http://bl.ocks.org/eesur/0e9820fb577370a13099 отображается с информацией об аккорде при наведении курсора на текущий аккорд.

У меня есть довольно простая диаграмма аккордов, но я действительно не знаю, как заставить ее использовать фактические данные из моей матрицы, когда она наводится на аккорды. Я попытался сделать что-то во внутренних аккордах var, но все, что он делает, это наводит курсор, удаляет всю диаграмму и помещает туда текст HTML.

var matrix = [
[0,0,0,0,0,0,0,18],
[0,0,0,0,0,0,0,90],
[0,0,0,0,0,0,0,17],
[0,0,0,0,0,0,0,12],
[0,0,0,0,0,0,0,15],
[0,0,0,0,0,0,0,48],
[0,0,0,0,0,0,0,6],
[18,90,17,12,15,48,6,0]
];

    var colors = d3.scale.ordinal()
    .domain(d3.range(Names.length))
    .range(colors);

var chord = d3.layout.chord()
    .padding(.15)
    .sortChords(d3.descending)
    .matrix(matrix);

var arc = d3.svg.arc()
    .innerRadius(innerRadius*1.01)
    .outerRadius(outerRadius);

var path = d3.svg.chord()
    .radius(innerRadius);

////////////////////////////////////////////////////////////
////////////////////// Create SVG //////////////////////////
////////////////////////////////////////////////////////////

var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + (width/2 + margin.left) + "," + (height/2 + margin.top) + ")");




////////////////////////////////////////////////////////////
////////////////// Draw outer Arcs /////////////////////////
////////////////////////////////////////////////////////////

var outerArcs = svg.selectAll("g.group")
    .data(chord.groups)
    .enter().append("g")
    .attr("class", "group")
    .on("mouseover",fade(.1))
    .on("mouseout", fade(opacityDefault));
var text = outerArcs.selectAll("g").selectAll("text")
    .on("click", fade(.1))
    .on("mouseout", fade(opacityDefault));
var innerArc = svg.selectAll("path.chord")
    .on("mouseover", fade(.1))
    .on("mouseout", fade(opacityDefault));

outerArcs.append("path")
    .style("fill", function(d) { return colors(d.index); })
    .attr("d", arc);

////////////////////////////////////////////////////////////
////////////////////// Append Names ////////////////////////
////////////////////////////////////////////////////////////

//Append the label names on the outside
outerArcs.append("text")
  .each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
  .attr("dy", ".35em")
  .attr("class", "titles")
  .attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
  .attr("transform", function(d) {
        return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
        + "translate(" + (outerRadius + 10) + ")"
        + (d.angle > Math.PI ? "rotate(180)" : "");
  })
  .text(function(d,i) { return Names[i]; });

////////////////////////////////////////////////////////////
////////////////// Draw inner chords ///////////////////////
////////////////////////////////////////////////////////////

svg.selectAll("path.chord")
    .data(chord.chords)
    .enter().append("path")
    .attr("class", "chord")
    .style("fill", function(d) { return colors(d.source.index); })
    .style("opacity", opacityDefault)
    .on("mouseover", function (d) {
                  d3.select("#chart")
                    .style("visibility", "visible")
                    .html("Hello"); })
    .on("mouseout", fade(opacityDefault))
    .attr("d", path);

////////////////////////////////////////////////////////////
////////////////// Extra Functions /////////////////////////
////////////////////////////////////////////////////////////

//Returns an event handler for fading a given chord group.
function fade(opacity) {

  return function(d,i) {
    svg.selectAll("path.chord")
        .filter(function(d) { return d.source.index != i && d.target.index != i; })
        .transition()
        .style("opacity", opacity);
  };