Javascript 如何添加单击事件以在NVD3饼图中显示工具提示？

关于nvd3的文档不多。在以下示例中，工具提示显示在悬停事件上。这是框架的固有特性。在阅读其他stackoverflow问题后，可以使用如下方式通过单击与悬停来显示工具提示：

d3.selectAll('.nv-slice')
  .on('click', function(d) {
    console.log(d.data.label);
  }); 

如何应用单击事件来触发工具提示显示？

---

您可以使用将单击事件添加到饼图中

pie: {
       dispatch: {
             elementClick: function(e) {console.log(e.data.key) },
        }
      }

这将控制键值

如果您想从图表中删除预定义的工具提示，可以使用

tooltips:false

---

单击时，工具提示值将显示在控制台日志中。

因此，首先必须设置css规则，因为工具提示元素在第一次鼠标悬停之前不存在

添加到您的style.css

.nvtooltip {
    display: none!important;
}

然后在创建图形后需要一个回调函数， 因此，向nvd3元素添加onready属性，如下所示

<nvd3 options="options" data="data" on-ready="callback"></nvd3>

给你：

编辑 如何，对于初学者来说

首先，我在网上搜索图书馆的任何文档。正如问题的作者所提到的，文档不是很好。 因此，我发现我可以通过使用浏览器的内置web工具查找tooltip元素来使用css打开工具提示

之后，我在javascript控制台中检查了如何使用

d3影响工具提示的显示。只需在单击时启用它，或者在鼠标移出饼图元素时禁用它，这真的很容易

我必须解决的最后一个问题是，当必须启动代码时，必须在代码运行之前创建饼图（元素）。所以我在文档中搜索事件，主要是onload事件

然后，我访问了ready=“callback”

属性上的

，并在回调函数中插入了代码

代码解释
每个slice元素都有类名“nv slice”
所以通过使用
d3.selectAll（'.nv slice'）
我们可以得到slice元素的列表
（看起来jQuery不是纯Javascript）
然后我们使用.on（eventname，callbackFunction）在它们上附加一个事件

正如我们希望的那样，当我们单击其中的每一个按钮时，显示工具提示，
我们的事件名称是
单击
，在回调函数中，我们实现了显示工具提示的代码

在回调函数上：
每个工具提示都有类名
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（）{…}）
命令从事件获取回调

但由于某些原因，这有一些视觉问题，这表明我们可能有其他函数正在侦听，我们忽略了它（可能是一个bug）

因此，为了不超过它，我们可以使用
addEventListener
函数来创建一个新的事件回调

要做到这一点，我们必须在纯javascript中获取元素，而不是在一些类似jQuery的lib中。因此，我们使用
each
函数，该函数返回
this
变量中的元素

然后使用this.addEventListener（'mouseout'，function（）{…}，false）将a
mouseout
事件附加到元素上
同样，与我们在回调函数中实现隐藏所有工具提示的函数之前完全相同。
在鼠标上输入hide，隐藏工具提示。然后单击各个饼图部分，然后显示工具提示。


查看以下内容：


谢谢Raj，但是我如何使工具提示相对于控制台日志直观地显示呢？谢谢我会将你的答案标记为完整。谢谢，你能用JS初学者能掌握的方式进一步解释一下你的思维过程吗？看起来很棒。你还需要一个代码解释吗，或者它对你来说清楚吗？我真的很感激代码解释。我想学习而不是简单地寻找答案：）是的，当然，我只是想你对我解决问题的方式感兴趣，很抱歉耽搁了，有很多东西要写：P这很有帮助，我需要消化，但我非常感激。谢谢谢谢谢谢，但是如果我想使用enter键作为打开工具提示的键盘替代方案呢？我认为不可能在SVG子元素中引入焦点。如果我在图表外有3个按钮呢。当您输入一个按钮时，它将触发第1类的工具提示，在第2类上按enter键，它将打开第2类的工具提示，等等。在这种情况下，我们需要手动重新定位工具提示元素。现有工具提示根据鼠标指针的当前位置工作。如果您感兴趣，我已经专门为这个问题打开了一个悬赏，你可以通过查看我最近的查询找到它
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*/
}

   function HideTooltip() {
        $(".nvtooltip").hide();
    }

    function ShowTooltip() {
        $(".nvtooltip").show();
    }

    d3.select("#svgElement").selectAll(".nv-slice").on("mouseenter", HideTooltip)
        .on("mouseleave", HideTooltip)
        .on("click", ShowTooltip);