23

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

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

JSFiddle

我怎样才能做到这一点 ？

4

11 回答 11

42

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

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

我必须查看 src/multibar.js 中的源代码才能找到答案；既然它在那里，我想这就是它打算做的方式。然而，我赞同亚历克斯在他的回答中所说的：缺乏 NVD3 的文档是一个非常大的缺点。这很可悲，因为该项目的总体思路很棒：在不涉及所有细节的情况下为我们提供 D3 的强大功能......

于 2013-12-13T13:38:32.467 回答
31

由于缺乏文档，我遇到了同样的问题，并且正准备将 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");
           });
      });
于 2013-07-17T22:26:36.500 回答
4

这里有三个关键点。

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

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

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

IE。

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{}
              }
于 2016-04-27T20:10:18.307 回答
2

这对我有用：（e.target.data输出附加到该元素的数据属性，如 x、y ）

$(document).on("click", "#chart svg", function(e) {
     console.log (e);
     console.log (e.target.__data__);
    });
于 2013-11-28T22:58:38.507 回答
2

这对我有用。 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) 以避免未定义的错误。

于 2016-04-18T13:09:59.667 回答
2

这个 coderwall 博客为我们指明了正确的方向。

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

于 2016-04-01T05:18:17.110 回答
2

如果使用 AngularJS，请在您的app.js.

$scope.$on('elementClick.directive', function(angularEvent, event){
    console.log(event);
});
于 2015-09-18T06:57:01.083 回答
0

jQuery 让这一切变得简单：

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

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

于 2014-01-14T00:19:18.477 回答
0 
$('.nv-pie .nv-pie .nv-slice').click(function(){
   temp = $(this).text();
   alert(temp);
})

这适用于饼图，同样，您也可以继续使用其他图表....

于 2014-02-21T08:41:05.160 回答
0

只需在控制器中为您的选项添加回调如果使用 BarChart 然后将 multibar 替换为离散条 

$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);                             
        });
    }
}
};
于 2019-10-25T04:54:02.923 回答
0

对于堆积面积图，您应该禁用interactiveGuideline并使用elementClick.area：

chart.useInteractiveGuideline(false);

chart.stacked.scatter.dispatch.on("elementClick.area", function(e) {
  console.log(e);
});
于 2015-12-21T13:42:26.727 回答