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

Question

关于nvd3的文档不多。 在下面的plunkr中，工具提示显示在悬停事件上。 这是框架的原生。 在阅读其他stackoverflow问题后，可以使用类似下面的内容通过点击与悬停显示工具提示：

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

如何应用单击事件来触发工具提示显示？ http://plnkr.co/edit/QYuol3Q10xsA3pziiWGl?p=preview

Answer 1

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

添加到你的style.css

.nvtooltip {
    display: none!important;
}

然后在创建图形后需要一个回调函数，所以将onready属性添加到你的nvd3元素中就像这样

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

现在你可以实现你的hack来打开和关闭工具提示，所以在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工具中的内置工具找到tooltip元素来使用css来转换工具提示。

之后我检查了javascript控制台，如何使用d3.selectAll影响工具提示的显示。 只需在点击时启用它就可以轻松实现，并且可能在鼠标输出饼图元素时禁用它。

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

然后我遇到了on-ready="callback"属性，我刚刚在回调函数上插入了代码。

代码解释每个slice元素都有类名“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中获取元素而不是像lib这样的jQuery。 出于这个原因，我们使用each函数返回this变量中的元素。

然后我们使用this.addEventListener('mouseout', function(){...}, false);在元素上附加一个mouseout事件this.addEventListener('mouseout', function(){...}, false); 再次完全像我们在回调中实现一个隐藏所有工具提示的函数之前。

Answer 2

在鼠标上输入隐藏工具提示。然后当我们点击单个饼图部分然后显示工具提示。

看看这个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);

Answer 3

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

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

这将控制键值。

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

tooltips:false

http://plnkr.co/edit/Vy2iaSsUhdXvC0P0kxMO?p=preview

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