elementClick 事件未在 angular-nvd3 图表中触发答案

【问题标题】：elementClick event is not firing in angular-nvd3 chartelementClick 事件未在 angular-nvd3 图表中触发
【发布时间】：2017-03-04 14:49:01
【问题描述】：

我正在使用Angular-nvd3 绘制饼图。

HTML

<nvd3 options="options.chart.options" data="options.chart.data" api="options.chart.api" config="config" events="events"></nvd3>

Javascript

$scope.options.chart = {
    options: {
        chart: {
            type: 'pieChart',
            height: 500,
            margin: {
                top: 0,
                right: 40,
                bottom: 80,
                left: 40
            },
            x: function(d) {
                return d.key;
            },
            y: function(d) {
                return d.y;
            },
            showLabels: true,
            duration: 1500,
            labelThreshold: 0.01,
            showLegend: true,
            lines: {
                dispatch: {
                    elementClick: function(e) {
                        console.log('click')
                    },
                    elementMouseover: function(e) {
                        console.log('mouseover')
                    },
                    elementMouseout: function(e) {
                        console.log('mouseout')
                    }
                }
            }
        }
    },
    data: [{
        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
    }],
    api: {}
};

当用户点击饼图时，我需要调用一个事件。但是上面的代码不起作用。请帮帮我？

【问题讨论】：

标签： javascript angularjs d3.js nvd3.js angular-nvd3

【解决方案1】：

基本上，您在 angularjs 中使用第三方库以满足您的要求，因此对第三方的任何更改都应该反映在您自己的范围内，因此您应该使用 $scope.$apply()。

 elementClick: function(e) {
                    $scope.$apply();
                    console.log('click')
                }

希望对你有帮助。:)

【讨论】：

【解决方案2】：

我只是在你的 javascript 代码中替换它

lines: {
    dispatch: {
        elementClick: function(e){
            $scope.$apply();
            console.log('click')
        },
        elementMouseover: function(e){
            $scope.$apply();
            console.log('mouseover')
        },
        elementMouseout: function(e){
            $scope.$apply();
            console.log('mouseout')
        }
    }
}

与

pie: {
    dispatch: {
        elementClick: function(e){
            $scope.$apply();
            console.log('click')
        },
        elementMouseover: function(e){
            $scope.$apply();
            console.log('mouseover')
        },
        elementMouseout: function(e){
            $scope.$apply();
            console.log('mouseout')
        }
    }
}

然后它按您的预期工作。参考网址：write click event handle function on pieChart line

【讨论】：