关于 nvd3 的文档不多。在以下 plunkr 中，工具提示显示在悬停事件上。这是框架原生的。在阅读了其他 stackoverflow 问题后，人们会使用类似以下内容的方式通过单击而不是悬停来显示工具提示：
d3.selectAll('.nv-slice')
.on('click', function(d) {
console.log(d.data.label);
});
如何应用点击事件来触发工具提示显示？ http://plnkr.co/edit/QYuol3Q10xsA3pziiWGl?p=preview
【问题讨论】：
标签： javascript jquery angularjs d3.js nvd3.js
所以，首先你必须设置一个 css 规则，因为 tooltip 元素在第一次鼠标悬停之前不存在。
添加到你的 style.css
.nvtooltip {
display: none!important;
}
那么你需要一个图表创建后的回调函数， 所以像这样将 onready 属性添加到你的 nvd3 元素中
<nvd3 options="options" data="data" on-ready="callback"></nvd3>
现在您可以实施您的技巧来打开和关闭工具提示， 所以在 app.js 中的数据对象下添加回调函数
$scope.callback = function(scope, element){
// Add a click event
d3.selectAll('.nv-slice').on('click', function(){
d3.selectAll('.nvtooltip').each(function(){
this.style.setProperty('display', 'block', 'important');
});
});
// Clear tooltip on mouseout
d3.selectAll('.nv-slice').each(function(){
this.addEventListener('mouseout', function(){
d3.selectAll('.nvtooltip').each(function(){
this.style.setProperty('display', 'none', 'important');
});
}, false);
});
// we use foreach and event listener because the on('mouseout')
// was overidding some other function
};
你在这里： http://plnkr.co/edit/7WkFK2LqzDyDmnIt2xlf?p=preview
编辑 如何，对于初学者。
首先我在网上搜索了图书馆的任何文档。正如问题的作者所提到的，文档不是很好。 所以，我发现我可以通过使用浏览器的内置 Web 工具找到工具提示元素来使用 css 来打开工具提示。
之后，我在 javascript 控制台中检查了如何使用 d3.selectAll 影响工具提示的显示。只需在点击时启用它并在鼠标移出饼图元素时禁用它真的很容易。
我必须解决的最后一个问题是，当必须触发代码时，必须在代码运行之前创建饼图（元素）。所以我搜索了事件的文档，主要是 onload 事件。
然后我遇到了on-ready="callback" 属性，我只是在回调函数上插入了代码。
代码说明
每个切片元素都有类名“nv-slice”
所以通过使用d3.selectAll('.nv-slice')，我们得到了切片元素的列表
（这看起来像 jQuery 不是纯 Javascript）
然后我们使用 .on(eventname, callbackFunction) 为它们附加一个事件
当我们点击它们中的每一个时，我们想要显示工具提示，
我们的事件名称是click，在回调函数中我们实现了显示工具提示的代码。
关于回调函数：
每个工具提示都有类名nvtooltip，所以我们使用命令 d3.selectAll('.nvtooltip') 来选择它们，这是一个列表。
在我们的例子中，我们只有一个工具提示，但只是为了确保我们将它用作工具提示列表。
因此，对于每个工具提示.each(callbackFunction)，我们希望更改 css 以使工具提示可见。
通常，当我们从元素事件中获得回调时，this 变量指向该元素。所以
function(){
// Access the element style
this.style.setProperty('display', 'block', 'important');
/* And overide the display property that the style.css gave it
as the style css has a "important" we also have to include one
otherwise we would fail to overide the rule*/
}
onclick 现在正在工作，但也许我们需要在离开单击的切片后关闭工具提示...
所以一个简单的解决方案是在光标离开切片时隐藏工具提示。
为此，我们再次使用d3.selectAll('.nv-slice') 获取所有切片，现在正常情况下，我们将使用on('mouseout', function(){...}) 命令从事件中获取回调。
但由于某种原因，这存在一些视觉问题，这表明我们可能有其他功能正在那里监听，我们覆盖了它（可能是一个错误）。
所以为了不覆盖它，我们可以使用addEventListener 函数来创建一个新的事件回调。
为此，我们必须在纯 javascript 中获取元素，而不是在一些 jQuery 中，例如 lib。因此，我们使用each 函数返回this 变量中的元素。
然后我们使用this.addEventListener('mouseout', function(){...}, false); 在元素上附加一个mouseout 事件
再次就像我们在回调中实现一个隐藏所有工具提示的函数之前一样。
【讨论】：
在鼠标输入时隐藏工具提示。然后当我们单击单个饼图部分时，显示工具提示。
看看这个 Plunk：
http://plnkr.co/edit/Bx1aNqJ7Y2Kd42PKqFaG?p=preview
function HideTooltip() {
$(".nvtooltip").hide();
}
function ShowTooltip() {
$(".nvtooltip").show();
}
d3.select("#svgElement").selectAll(".nv-slice").on("mouseenter", HideTooltip)
.on("mouseleave", HideTooltip)
.on("click", ShowTooltip);
【讨论】：
您可以使用
将点击事件添加到饼图pie: {
dispatch: {
elementClick: function(e) {console.log(e.data.key) },
}
}
这将控制键值。
如果您想从图表中删除预定义的工具提示，您可以使用
tooltips:false
http://plnkr.co/edit/Vy2iaSsUhdXvC0P0kxMO?p=preview
点击工具提示值将显示在控制台日志中。
【讨论】：