如何在d3和弦图中显示/消失相应的文字

Question

当您将鼠标悬停在实际和弦上时，尝试执行类似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);
  };

Answer 1

在您的代码中

.on("mouseover", function (d) {
   d3.select("#chart")
     .style("visibility", "visible")

图表是指您的图表，因此它会替换您的所有图表，

如果您使用

d3.select("#tooltip")

并有一个

<div id='tooltip'></div>

在你的html中，它会像你期望的那样创建工具提示，而不会破坏你的图表。

查看原始图表的源代码

http://bl.ocks.org/eesur/raw/0e9820fb577370a13099/

并注意有一个id为id＆＃34;工具提示＆＃34;这是由javascript和styles引用的。