如何在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/

並注意，有一個div，其ID為“ tooltip”，由javascript和樣式引用。