How to add a click event to show a tooltip in an NVD3 pie chart?

Question

There is no documentation for nvd3. In the next plunkr, a tooltip is displayed in the hang event. This is native to the framework. After reading other stackoverflow related questions, you can use the following to display a tooltip with a click and freeze:

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

How can I apply the click event to trigger a tooltip? 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

Edit , .

. , . , , css, - .

javascript, d3.selectAll. , , pie.

, , , , () . , 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') normaly, on('mouseout', function(){...}) .

- , , , , , (, ).

, , addEventListener, .

, javascript jQuery, lib. each, this.

a 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

click ,

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

.

,

tooltips:false

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

.