How to make a pie chart clickable

Question

My question is how do I leave a pie chart (pie Chart) clickable. Type, invoke a function to filter a list from the click on one part of the chart. I am currently using the Angular-nvd3, but could not, even with the material, subsidies to manipulate the way I need. Thank you very much for the help!

Answer 1

You just need to add the event pie -> dispatch -> elementClick in the chart options:

pie: {
  dispatch: {
    elementClick: function(evento){ console.log(evento) }
  }
}

angular
  .module('meuApp', ['nvd3'])
  .controller('MeuController', MeuController);

MeuController.$inject = [];

function MeuController() {
  var vm = this;

  vm.opcoes = {
    chart: {
      type: 'pieChart',
      pie: {
        dispatch: {
          elementClick: function(evento){ console.log(evento) }
        }
      },
      height: 500,
      x: function(d) {
        return d.key;
      },
      y: function(d) {
        return d.y;
      },
      showLabels: true,
      duration: 500,
      labelThreshold: 0.01,
      labelSunbeamLayout: true,
      legend: {
        margin: {
          top: 5,
          right: 35,
          bottom: 5,
          left: 0
        }
      }
    }
  };

  vm.dados = [
    {key: "One", y: 5},
    {key: "Two", y: 2},
    {key: "Three", y: 9},
    {key: "Four", y: 7},
    {key: "Five", y: 4},
    {key: "Six", y: 3},
    {key: "Seven", y: .5}
  ];
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.5/angular-nvd3.min.js"></script>

<div ng-app="meuApp">
  <div ng-controller="MeuController as vm">
    <nvd3 options="vm.opcoes" data="vm.dados"></nvd3>
  </div>
</div>