工具提示未显示 d3.js答案

【问题标题】：Tooltip not showing up d3.js工具提示未显示 d3.js
【发布时间】：2016-07-09 13:45:21
【问题描述】：

我有简单的工具提示问题，但找不到解决方案。下面的代码绘制了一个圆环图。当用户将鼠标悬停在一块饼上时，工具提示应该会在甜甜圈的中间弹出。但我不知道为什么它在这里不起作用。谁能帮忙指出问题？这里是JSbins

如果我将第 36 行更改为 d3.select(#pieChart)，则工具提示有效。但是，出于某些原因，我希望将工具提示附加到 svg 上。

非常感谢！

【问题讨论】：

is it possible to append a div inside svg element的可能重复
就像@Paul 所说，你不能在svg 中使用div 元素。您想要的是使用g（组）元素，然后将text 元素附加到该元素，设置.attr("y", <value>) 以垂直偏移它们。然后，当您更新工具提示时，您只需将 .html(...) 更改为 .text(...)。

【解决方案1】：

没有经常使用 JSBin，所以我使用了 JSFiddle：https://jsfiddle.net/thatoneguy/0qgzLk2L/

您不能将 div 附加到 svg，因此您必须像这样创建一个容器：

 var svgContainer = d3.select('#pieChart');

然后将 svg 附加到此：

var svg = svgContainer.append('svg')

现在使用容器作为工具提示：

var tooltip = svgContainer
      .append('div')

【讨论】：