nvd3 中的事件处理答案

【问题标题】：Event Handling in nvd3nvd3 中的事件处理
【发布时间】：2016-01-27 12:22:27
【问题描述】：

我正在使用 nvd3 并尝试在单击图表时添加事件处理。但是我在实现它时遇到了一些问题，由于缺乏 nvd3 的文档，我无法获得解决方案。我关注了这个link，但我仍然在控制台中收到以下错误：

ReferenceError: 图表未定义

谁能告诉我我遗漏了什么或者在 nvd3 中事件处理的任何最佳解决方案。

【问题讨论】：

你能发布你的代码吗？
你解决了吗？我的回答对你有帮助吗？
是的，我能够得到解决方案，但我尝试了不同的方法。正如您所建议的，我查看了图形名称和调度事件的 nvd3 和 d3 代码，并且它起作用了。我现在发布我的解决方案。
好的！如果对您有帮助，请将我的回答标记为有用。谢谢

标签： angularjs d3.js charts nvd3.js

【解决方案1】：

可能您的问题是图形变量的名称；我为你做一个小提琴。在我的示例中，“图表”是图形变量的名称。看看你的情况也是一样的。

var chart = nv.models.multiBarChart();

不管怎样，用小提琴你可以看到完整的代码。如果您单击一个项目，您可以在控制台中看到消息。

http://jsfiddle.net/g952qb5c/

【讨论】：

【解决方案2】：

按照 Giordano 的建议，我查找了图表的名称和调度事件。然后我在这样的选项中添加了这些事件监听器。

注意：此解决方案适用于 nvd3 和 angular。

$scope.options2 = {
        chart: {
            type: 'pieChart',
            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
                }
            },
            pie:{
                dispatch: {
                    elementClick : function(e){
                        console.log('element: ' + e.value);
                        console.log(e);
                    }
                }
            }
        }
    };

希望这对其他人也有帮助。

【讨论】：