Question

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

var b64 = "data:image/jpeg;base64,/9j/4AAQSkZJRgABA......";
var bin = atob(b64.split(',')[1]);
var exif = EXIF.readFromBinaryFile(new BinaryFile(bin));
alert(exif.Orientation);

如何应用点击事件来触发工具提示显示？ 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>

现在你可以实现你的黑客来打开和关闭工具提示，所以在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元素都有classname＆＃34; nv-slice＆＃34; 所以通过使用d3.selectAll('.nv-slice')我们得到切片元素的列表（这看起来像jQuery不是纯粹的Javascript）然后我们使用.on（eventname，callbackFunction）
在它们上附加一个事件
当我们点击其中的每一个时，我们想要显示工具提示，我们的事件名称是click，在回调函数中，我们实现了显示工具提示的代码。

在回调函数上：每个工具提示都有一个类名nvtooltip，因此我们使用d3.selectAll（＆＃39; .nvtooltip＆＃39;）命令选择它们，这是一个列表。在我们的例子中，我们只有一个工具提示，但只是为了确保我们将其用作工具提示列表。因此，对于每个工具提示.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变量中的元素。

然后，我们使用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

点击工具提示值

将显示在控制台日志中。

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

3 个答案: