NVD3为饼图的单个切片创建单击事件

Question

我正在使用NVD3来创建饼图。 用于生成饼图的代码：

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;   
        }
    });

现在我在饼图中有两个切片，如图所示。

我使用了以下方法1）在方法上使用js

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

但是没有发生点击事件。

请纠正我错在哪里。

Answer 1

用这个：

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

演示

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

Answer 2

我认为这可能是一个简单的方法，我也陷入困境，所以经过一些搜索，我得到了这个解决方案。 需要为lagend和饼图单击元素定义不同的属性。 有关详细信息，请浏览图表： 单击此处

         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();
                        },
                    }
                }