如何添加單擊事件以在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

點擊工具提示值將顯示在控制台日志中。