Question

我正在使用nvd3.js并尝试添加点击事件

d3.selectAll(".nv-bar").on('click', function () {console.log("test");});

JSFiddle

我该怎么做？

Answer 1

刚刚发现这也有效（至少对于多栏图表）：

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

我必须查看src / multibar.js中的源代码才能找到;因为它在那里，我想这是它打算完成的方式。然而，我在Alex的回答中说道：NVD3缺乏文档是一个非常大的缺点。这很令人伤心，因为项目的总体思路很棒：给我们D3的力量而不涉及所有细节......

Answer 2

由于缺少文档，我遇到了同样的问题而且即将把NVD3全部转储到一起......你需要做的是为addGraph（）添加一个回调函数。另请注意d3.selectAll（）而不是d3.select（）。

祝你好运。

nv.addGraph(function() {
     var chart = nv.models.multiBarHorizontalChart()
         .x(function(d) { return d.label })
         .y(function(d) { return d.value })
         .margin({top: 5, right: 5, bottom: 5, left: 5})
         .showValues(false)
         .tooltips(true)
         .showControls(false);

     chart.yAxis
         .tickFormat(d3.format('d'));

     d3.select('#social-graph svg')
         .datum([data])
       .transition().duration(500)
         .call(chart);

       nv.utils.windowResize(chart.update);

       return chart;
     },function(){
          d3.selectAll(".nv-bar").on('click',
               function(){
                     console.log("test");
           });
      });

Answer 3

这里有三个要点。

1）没有文档意味着您必须浏览源代码。

2）所有图表都有一个工具提示，这意味着事件已在源代码中触发。

3）使用配置对象（在文档中）作为源代码的路线图。

即

var config = {chart: {type: 'multiChart',xAxis:{},yAxis{}}

打开nvd3 / nv.d3.js文件

CTRL + F +图表类型。在这种情况下，它是'multiChart'。

你会看到nv.models.multiChart。

向下滚动以查找工具提示事件，您将找到所需的文档。

lines1.dispatch.on('elementMouseout.tooltip', function(evt) {tooltip.hidden(true) });
stack1.dispatch.on('elementMouseout.tooltip', function(evt) {tooltip.hidden(true) });
bars1.dispatch.on('elementMouseout.tooltip', function(evt) {tooltip.hidden(true) });

因此，要编写自己的事件......

var config = {chart: {type: 'multiChart',
               bars1: {
                dispatch:{
                    elementClick:function(e){//do Stuff}
                },
               xAxis:{},yAxis{}
              }

Answer 4

这对我有用:( e.target。数据输出附加到该元素的数据属性，如x，y）

$(document).on("click", "#chart svg", function(e) {
     console.log (e);
     console.log (e.target.__data__);
    });

Answer 5

如果使用AngularJS，请在app.js。

中使用此代码

$scope.$on('elementClick.directive', function(angularEvent, event){
    console.log(event);
});

Answer 6

这对我有用。 https://bridge360blog.com/2016/03/07/adding-and-handling-click-events-for-nvd3-graph-elements-in-angular-applications/

只需使用console.log（e）而不是console.log（e.data）来避免未定义的错误。

Answer 7

This coderwall blog让我们朝着正确的方向前进。

chr.scatter.dispatch.on('elementClick', function(event) { console.log(event); });

Answer 8

jQuery使这很简单：

$( ".nv-bar" ).click(function() {
  console.log("test");
});

小提琴@ http://jsfiddle.net/eTT5y/1/

Answer 9

$('.nv-pie .nv-pie .nv-slice').click(function(){
   temp = $(this).text();
   alert(temp);
})

这对于饼图来说可以正常工作，同样你也可以继续其他图表......

Answer 10

只需向控制器中的选项添加回调如果使用BarChart，则将Multibar替换为Discretebar

$scope.options = {
chart: {
    type: 'multiBarHorizontalChart',
    height: 450,
    x: function(d){return d.label;},
    y: function(d){return d.value;},
    showControls: true,
    showValues: true,
    duration: 500,
    xAxis: {
        showMaxMin: false
    },
    yAxis: {
        axisLabel: 'Values',
        tickFormat: function(d) {
            return d3.format(',.2f')(d);
        }
    },
    callback: function(chart) {
        chart.multibar.dispatch.on('elementClick', function(e){
            console.log('elementClick in callback', e.data);                             
        });
    }
}
};

如何在nvd3.js图上添加单击事件

10 个答案: