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

Question

关于 nvd3 的文档不多。在下面的 plunkr 中，工具提示显示在悬停事件上。这是框架的本机。在阅读了其他 Whosebug 问题之后，人们会使用类似以下内容的方式通过单击而不是悬停来显示工具提示：

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

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

Answer 1

您可以使用

向饼图添加点击事件

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

这将控制键值。

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

tooltips:false

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

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

Answer 2

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

添加到您的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 函数，该函数 returns 使用 this 变量中的元素。

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

Answer 3

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

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

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

How can I add a click event to show a tooltip in an NVD3 Pie Chart?

javascript

jquery

angularjs

d3.js

nvd3.js