Javascript 如何在D3设计中添加悬停文字？

我正试图用我发现的能完全满足我需要的东西来构建一个图表。但是，我想在每个节点上添加名称，这样每次鼠标悬停在节点上时，它都会显示节点的名称。 代码如下：

力有向图
.节点{
光标：指针；
行程：#3182bd；
笔划宽度：1.5px；
}
.链接{
填充：无；
行程：#9ecae1；
笔划宽度：1.5px；
}
可变宽度=960，
高度=500，
根；
var-force=d3.layout.force（）
.尺寸（[宽度、高度]）
.在（“滴答”，滴答）上；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var link=svg.selectAll（“.link”），
node=svg.selectAll（“.node”）；
d3.json（“readme.json”，函数（错误，json）{
如果（错误）抛出错误；
root=json；
更新（）；
});
函数更新（）{
变量节点=展平（根），
links=d3.layout.tree（）.links（节点）；
//重新启动强制布局。
力
.节点（节点）
.链接（links）
.start（）；
//更新链接…
link=link.data（links，函数（d）{返回d.target.id；}）；
//退出所有旧链接。
link.exit（）.remove（）；
//输入任何新链接。
link.enter（）.insert（“行”，“节点”）
.attr（“类”、“链接”）
.attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
//更新节点…
node=node.data（节点，函数（d）{return d.id；}）.style（“fill”，color）；
//退出所有旧节点。
node.exit（）.remove（）；
//输入任何新节点。
node.enter（）.append（“圆”）
.attr（“类”、“节点”）
.attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）
.attr（“r”，函数（d）{return Math.sqrt（d.size）/10 | | 4.5；}）
.样式（“填充”，颜色）
.on（“单击”，单击）
.呼叫（强制拖动）；
}
函数tick（）{
attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）；
}
//叶节点颜色为橙色，包装为白色或蓝色。
功能色（d）{
返回d.#children？#3182bd:d.children？#c6dbef:#fd8d3c；
}
//在单击时切换子项。
功能点击（d）{
如果（！d3.event.defaultPrevented）{
如果（d.儿童）{
d、 _children=d.children；
d、 children=null；
}否则{
d、 儿童=d.\U儿童；
d、 _children=null；
}
更新（）；
}
}
//返回根目录下所有节点的列表。
函数展平（根）{
var节点=[]，i=0；
函数递归（节点）{
if（node.children）node.children.forEach（recurse）；
如果（！node.id）node.id=++i；
nodes.push（节点）；
}
递归（根）；
返回节点；
}

我无法发表评论，我正在打电话。以下是带有工具提示的解决方案：

它不漂亮，因为它使用了foreignObject，但它可以工作。基本上，您不会将文本附加到节点，而是将其创建为新的画布对象

//create the nodes
  var nodes = canvas.selectAll('.node')
    .data(nodes)
    .enter()
    .append('g')
    .attr('class', 'g node')
    .call(force.drag)
    .on('mouseover', function(d, i) {
      var tooltip = document.getElementById('tooltip');
      var textbox = document.getElementById('tooltipText');
      var xpos;
      var ypos;
      var tooltipContent = d.country
      if (d.x > 450) {
        xpos = d.x - 110;
      } else {
        xpos = d.x + 10;
      }
      if (d.y < 100) {
        ypos = d.y + 10;
      } else {
        ypos = d.y - 50;
      }
      tooltip.setAttribute('x', xpos);
      tooltip.setAttribute('y', ypos);
      textbox.innerHTML = tooltipContent;
    })
    .on('mouseout', function(d) {
      var tooltip = document.getElementById('tooltip');
      var textbox = document.getElementById('tooltipText');
      tooltip.setAttribute('x', -100);
      tooltip.setAttribute('y', -50);
      textbox.innerHTML = '';
    })

  //append another foreign object to be used as the tooltip 
  //appended to canvas rather than note to make sure it is visible
  canvas.append('foreignObject')
    .attr('id', 'tooltip')
    .attr('height', 50)
    .attr('width', 150)
    .attr('x', -200)
    .attr('y', -200)
    .append('xhtml:div')
    .attr('id', 'tooltipText')
    .html('');

//创建节点
var nodes=canvas.selectAll（“.node”）
.数据（节点）
.输入（）
.append（'g'）
.attr（'class'，'g node'）
.call（强制拖动）
.on（'mouseover'，函数（d，i）{
var tooltip=document.getElementById（'tooltip'）；
var textbox=document.getElementById（'tooltipText'）；
var-xpos；
var-ypos；
var tooltipContent=d.country
如果（d.x>450）{
xpos=d.x-110；
}否则{
xpos=d.x+10；
}
如果（d.y<100）{
ypos=d.y+10；
}否则{
ypos=d.y-50；
}
tooltip.setAttribute（'x'，xpos）；
工具提示.setAttribute（'y'，ypos）；
textbox.innerHTML=ToolTicContent；
})
.on（'mouseout'，函数（d）{
var tooltip=document.getElementById（'tooltip'）；
var textbox=document.getElementById（'tooltipText'）；
tooltip.setAttribute（'x'，-100）；
工具提示.setAttribute（'y'，-50）；
textbox.innerHTML=''；
})
//附加另一个用作工具提示的外来对象
//附加到画布而不是注释，以确保其可见
canvas.append（'foreignObject'）
.attr（'id'，'tooltip'）
.attr（'height'，50）
.attr（'width'，150）
.attr（'x'，-200）
.attr（'y'，-200）
.append（'xhtml:div'）
.attr（'id'，'tooltipText'）
.html（“”）；

我无法发表评论，我正在打电话。以下是带有工具提示的解决方案：

它不漂亮，因为它使用了foreignObject，但它可以工作。基本上，您不会将文本附加到节点，而是将其创建为新的画布对象

//create the nodes
  var nodes = canvas.selectAll('.node')
    .data(nodes)
    .enter()
    .append('g')
    .attr('class', 'g node')
    .call(force.drag)
    .on('mouseover', function(d, i) {
      var tooltip = document.getElementById('tooltip');
      var textbox = document.getElementById('tooltipText');
      var xpos;
      var ypos;
      var tooltipContent = d.country
      if (d.x > 450) {
        xpos = d.x - 110;
      } else {
        xpos = d.x + 10;
      }
      if (d.y < 100) {
        ypos = d.y + 10;
      } else {
        ypos = d.y - 50;
      }
      tooltip.setAttribute('x', xpos);
      tooltip.setAttribute('y', ypos);
      textbox.innerHTML = tooltipContent;
    })
    .on('mouseout', function(d) {
      var tooltip = document.getElementById('tooltip');
      var textbox = document.getElementById('tooltipText');
      tooltip.setAttribute('x', -100);
      tooltip.setAttribute('y', -50);
      textbox.innerHTML = '';
    })

  //append another foreign object to be used as the tooltip 
  //appended to canvas rather than note to make sure it is visible
  canvas.append('foreignObject')
    .attr('id', 'tooltip')
    .attr('height', 50)
    .attr('width', 150)
    .attr('x', -200)
    .attr('y', -200)
    .append('xhtml:div')
    .attr('id', 'tooltipText')
    .html('');

//创建节点
var nodes=canvas.selectAll（“.node”）
.数据（节点）
.输入（）
.append（'g'）
.attr（'class'，'g node'）
.call（强制拖动）
.on（'mouseover'，函数（d，i）{
var tooltip=document.getElementById（'tooltip'）；
var textbox=document.getElementById（'tooltipText'）；
var-xpos；
var-ypos；
var tooltipContent=d.country
如果（d.x>450）{
xpos=d.x-110；
}否则{
xpos=d.x+10；
}
如果（d.y<100）{
ypos=d.y+10；
}否则{
ypos=d.y-50；
}
tooltip.setAttribute（'x'，xpos）；
工具提示.setAttribute（'y'，ypos）；
textbox.innerHTML=ToolTicContent；
})
.on（'mouseout'，函数（d）{
var tooltip=document.getElementById（'tooltip'）；
var textbox=document.getElementById（'tooltipText'）；
tooltip.setAttribute（'x'，-100）；
工具提示.setAttribute（'y'，-50）；
textbox.innerHTML=''；
})
//附加另一个用作工具提示的外来对象
//附加到画布而不是注释，以确保其可见
canvas.append（'foreignObject'）
.attr（'id'，'tooltip'）
.attr（'height'，50）
.attr（'width'，150）
.attr（'x'，-200）
.attr（'y'，-200）
美联社