I am using NVD3 to create a pie chart. code to generate pie chart:

nv.addGraph(function() {
        var chart = nv.models.pieChart().x(function(d) { return d.label }).y(function(d) { return d.value }).showLabels(true);
        d3.select("#chart svg").datum(exampleData()).transition().duration(350).call(chart);
        return chart;

        function exampleData() {
            return vm.chartData.userData;   
        }
    });

Now I have two slices in the pie chart as shown.

I have used the following approach 1)use js on method

var svg = d3.selectAll("#chart svg");
svg.select(".nv-pie").selectAll(".nv-slice")
.on('mouseover',function(d){
    console.log(d);
});

But no click event is happening.

Please correct me where I am wrong.

I am using NVD3 to create a pie chart. code to generate pie chart:

nv.addGraph(function() {
        var chart = nv.models.pieChart().x(function(d) { return d.label }).y(function(d) { return d.value }).showLabels(true);
        d3.select("#chart svg").datum(exampleData()).transition().duration(350).call(chart);
        return chart;

        function exampleData() {
            return vm.chartData.userData;   
        }
    });

Now I have two slices in the pie chart as shown.

I have used the following approach 1)use js on method

var svg = d3.selectAll("#chart svg");
svg.select(".nv-pie").selectAll(".nv-slice")
.on('mouseover',function(d){
    console.log(d);
});

But no click event is happening.

Please correct me where I am wrong.

• javascript
• jquery
• charts
• nvd3.js

• I have tried dispatch, but its not working too. – rahul Commented Apr 12, 2016 at 11:50

2 Answers 2

Use this:

chart.pie.dispatch.on("elementClick", function(e) {
    console.log(e);
});

Demo

var chartElement = d3.select("#chart svg");
var chart;

nv.addGraph(function() {
  chart = nv.models.pieChart()
    .x(function(d) {
      return d.label
    })
    .y(function(d) {
      return d.value
    })
    .showLabels(true);

  var chartData = [{
    label: "Foo",
    value: 67
  }, {
    label: "Bar",
    value: 33
  }];

  chartElement
    .datum(chartData)
    .call(chart);

  chart.pie.dispatch.on("elementClick", function(e) {
    alert("You've clicked " + e.data.label);
  });

  return chart;
});

#chart {
  height: 500px;
}

<script src="https://cdnjs.cloudflare./ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/nvd3/1.8.2/nv.d3.min.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/nvd3/1.8.2/nv.d3.min.css" rel="stylesheet" />
<div id="chart">
  <svg></svg>
</div>

I think it could be a simple approach, i also got stuck in same, so after some search i got this solution. Need to define both different property for lagend and pie chart click element. for more details explore the chart : click here

         legend : {
                    margin : {
                        top : 5,
                        right : 40,
                        bottom : 50,
                        left : 0
                    },
                    dispatch : {
                        legendClick : function(e) {
                            $rootScope.clickedLagend = e
                            //in case send it to another page
                            $location.path('/url');
                            $scope.$apply();
                        },
                    }
                },
                pie : {
                    dispatch : {
                        elementClick : function(e) {
                            $rootScope.clickedLagend = e            
                            $location.path('/url');
                            $scope.$apply();
                        },
                    }
                }